wehub-resource-sync
4683 lines
164 KiB
JavaScript
4683 lines
164 KiB
JavaScript
// 知识库测试页面 JavaScript
|
||
|
||
// =====
|
||
// 性能优化: 防抖计时器
|
||
// =====
|
||
let heatmapUpdateTimer = null;
|
||
let statsUpdateTimer = null;
|
||
let dynamicDebounceDelay = 5; // 动态防抖延迟，基于上一次zOnly更新耗时，最小5ms
|
||
const MIN_DEBOUNCE_DELAY = 5; // 最小防抖延迟
|
||
const MAX_DEBOUNCE_DELAY = 200; // 最大防抖延迟
|
||
// =====
|
||
// 动态侧边栏配置与逻辑
|
||
// =====
|
||
|
||
// 侧边栏内容数据 - 定义6个功能模块
|
||
const sidebarData = {
|
||
dataSource: {
|
||
title: '数据源配置',
|
||
titleButton: '<button class="title-icon-btn" onclick="loadCollections()" title="刷新Collections"><i class="bi bi-arrow-clockwise"></i></button>',
|
||
templateId: 'tpl-dataSource'
|
||
},
|
||
operations: {
|
||
title: '结果操作',
|
||
templateId: 'tpl-operations'
|
||
},
|
||
chartControl: {
|
||
title: '图表选择与控制',
|
||
titleButton: '<button class="title-icon-btn" onclick="triggerImportJSON()" title="导入数据"><i class="bi bi-file-earmark-arrow-up"></i></button>',
|
||
templateId: 'tpl-chartControl'
|
||
},
|
||
statistics: {
|
||
title: '统计信息',
|
||
templateId: 'tpl-statistics'
|
||
},
|
||
filters: {
|
||
title: '筛选器控制',
|
||
templateId: 'tpl-filters'
|
||
}
|
||
};
|
||
|
||
// 当前激活的按钮 - 分为上下两个区域
|
||
let activeButtons = {
|
||
left: {
|
||
top: null,
|
||
bottom: null
|
||
},
|
||
right: {
|
||
top: null,
|
||
bottom: null
|
||
}
|
||
};
|
||
|
||
// 保存侧边栏的自定义宽度
|
||
let sidebarWidths = {
|
||
left: null,
|
||
right: null
|
||
};
|
||
|
||
// 保存上下分区的高度比例(存储上部分的像素高度)
|
||
let splitHeights = {
|
||
left: null,
|
||
right: null
|
||
};
|
||
|
||
// 从localStorage加载保存的宽度和高度
|
||
try {
|
||
const savedWidths = localStorage.getItem('sidebarWidths_testPage');
|
||
if (savedWidths) {
|
||
sidebarWidths = JSON.parse(savedWidths);
|
||
}
|
||
const savedHeights = localStorage.getItem('splitHeights_testPage');
|
||
if (savedHeights) {
|
||
splitHeights = JSON.parse(savedHeights);
|
||
}
|
||
} catch (e) {
|
||
console.error('加载侧边栏配置失败', e);
|
||
}
|
||
|
||
// 拖动状态
|
||
let dragState = {
|
||
isDragging: false,
|
||
draggedButton: null,
|
||
dragGhost: null,
|
||
dropIndicator: null,
|
||
startX: 0,
|
||
startY: 0,
|
||
dragThreshold: 5,
|
||
hasMoved: false
|
||
};
|
||
|
||
// 预加载所有侧边栏面板内容到统一的隐藏容器
|
||
function preloadAllPanels() {
|
||
console.log('[侧边栏] 预加载所有面板内容');
|
||
|
||
// 创建或获取全局隐藏容器
|
||
let globalPanelContainer = document.getElementById('globalPanelContainer');
|
||
if (!globalPanelContainer) {
|
||
globalPanelContainer = document.createElement('div');
|
||
globalPanelContainer.id = 'globalPanelContainer';
|
||
globalPanelContainer.style.display = 'none';
|
||
document.body.appendChild(globalPanelContainer);
|
||
}
|
||
|
||
// 为每个面板创建DOM，全部存储在隐藏容器中
|
||
Object.keys(sidebarData).forEach(panelName => {
|
||
const data = sidebarData[panelName];
|
||
if (!data) {
|
||
console.warn(`面板 "${panelName}" 配置不存在`);
|
||
return;
|
||
}
|
||
|
||
const panelDiv = document.createElement('div');
|
||
panelDiv.id = `panel-${panelName}`;
|
||
panelDiv.className = 'sidebar-panel';
|
||
panelDiv.style.display = 'none';
|
||
|
||
// 构建标题HTML,如果有titleButton则添加
|
||
const titleHTML = data.titleButton
|
||
? `<div class="panel-title-wrapper">
|
||
<h3 class="panel-title">${data.title}</h3>
|
||
${data.titleButton}
|
||
</div>`
|
||
: `<h3 style="font-size: 14px; font-weight: 600; margin-bottom: 15px; color: #404040; padding-bottom: 10px; border-bottom: 2px solid #6666FF;">${data.title}</h3>`;
|
||
|
||
// 获取模板内容
|
||
let contentHTML = '';
|
||
if (data.templateId) {
|
||
const tpl = document.getElementById(data.templateId);
|
||
if (tpl) {
|
||
contentHTML = tpl.innerHTML;
|
||
} else {
|
||
console.error(`Template #${data.templateId} not found for panel ${panelName}`);
|
||
}
|
||
} else if (data.content) {
|
||
contentHTML = data.content;
|
||
}
|
||
|
||
panelDiv.innerHTML = titleHTML + contentHTML;
|
||
|
||
globalPanelContainer.appendChild(panelDiv);
|
||
});
|
||
|
||
// 一次性初始化所有面板的事件处理器
|
||
console.log('[侧边栏] 初始化所有面板的事件处理器');
|
||
Object.keys(sidebarData).forEach(panelName => {
|
||
rebindEventHandlers(panelName);
|
||
});
|
||
}
|
||
|
||
// 更新侧边栏内容 - 动态移动面板DOM到目标位置
|
||
function updateSidebarContent(side, position, panel) {
|
||
const contentId = `${side}Content${position.charAt(0).toUpperCase() + position.slice(1)}`;
|
||
const content = document.getElementById(contentId);
|
||
|
||
if (!content) {
|
||
console.warn(`容器 #${contentId} 不存在`);
|
||
return;
|
||
}
|
||
|
||
// 隐藏该区域当前的所有面板
|
||
content.querySelectorAll('.sidebar-panel').forEach(p => {
|
||
p.style.display = 'none';
|
||
});
|
||
|
||
// 从全局容器或其他位置获取面板
|
||
const panelDiv = document.getElementById(`panel-${panel}`);
|
||
if (!panelDiv) {
|
||
console.warn(`面板 #panel-${panel} 不存在`);
|
||
return;
|
||
}
|
||
|
||
// 将面板移动到目标容器（如果不在的话）
|
||
if (panelDiv.parentElement !== content) {
|
||
content.appendChild(panelDiv);
|
||
}
|
||
|
||
// 显示面板
|
||
panelDiv.style.display = 'block';
|
||
console.log(`[侧边栏] 面板 ${panel} 移动到 ${contentId} 并显示`);
|
||
|
||
// 如果是筛选器面板,在显示后更新相似度滑块轨道
|
||
if (panel === 'filters' && typeof window.updateSimilarityTrack === 'function') {
|
||
setTimeout(() => {
|
||
window.updateSimilarityTrack();
|
||
}, 50);
|
||
}
|
||
}
|
||
|
||
// 绑定面板事件处理器（只在预加载时调用一次）
|
||
function rebindEventHandlers(panel) {
|
||
console.log(`[事件绑定] 初始化面板: ${panel}`);
|
||
|
||
// 根据不同的面板绑定相应的事件处理器
|
||
switch (panel) {
|
||
case 'filters':
|
||
// 初始化筛选器控件
|
||
if (typeof initRangeSlider === 'function') {
|
||
initRangeSlider();
|
||
}
|
||
if (typeof initTopkSlider === 'function') {
|
||
initTopkSlider();
|
||
}
|
||
// 初始化显示字段选择器（现在在筛选器面板中）
|
||
if (typeof initDisplayFieldSelectors === 'function') {
|
||
initDisplayFieldSelectors();
|
||
}
|
||
break;
|
||
|
||
case 'dataSource':
|
||
// 加载collections数据
|
||
if (typeof loadCollections === 'function') {
|
||
loadCollections();
|
||
}
|
||
|
||
// 为 collection 选择框添加事件委托
|
||
const xContainer = document.getElementById('xCollectionContainer');
|
||
const yContainer = document.getElementById('yCollectionContainer');
|
||
|
||
if (xContainer) {
|
||
xContainer.addEventListener('change', function (e) {
|
||
if (e.target.classList.contains('x-collection-select')) {
|
||
const errorEl = document.getElementById('xCollectionError');
|
||
if (errorEl) errorEl.style.display = 'none';
|
||
}
|
||
});
|
||
}
|
||
|
||
if (yContainer) {
|
||
yContainer.addEventListener('change', function (e) {
|
||
if (e.target.classList.contains('y-collection-select')) {
|
||
const errorEl = document.getElementById('yCollectionError');
|
||
if (errorEl) errorEl.style.display = 'none';
|
||
}
|
||
});
|
||
}
|
||
break;
|
||
|
||
case 'chartControl':
|
||
// 图表控制面板已简化，不需要额外的事件绑定
|
||
break;
|
||
|
||
case 'statistics':
|
||
// 统计信息是动态填充的,不需要特别的事件绑定
|
||
break;
|
||
|
||
case 'operations':
|
||
// 导出操作的事件已经通过全局绑定
|
||
break;
|
||
}
|
||
}
|
||
|
||
// 更新侧边栏整体状态
|
||
function updateSidebarState(side) {
|
||
const sidebar = document.getElementById(`${side}Sidebar`);
|
||
const contentTop = document.getElementById(`${side}ContentTop`);
|
||
const contentBottom = document.getElementById(`${side}ContentBottom`);
|
||
const verticalHandle = sidebar.querySelector('.vertical-resize-handle');
|
||
|
||
const hasTop = activeButtons[side].top !== null;
|
||
const hasBottom = activeButtons[side].bottom !== null;
|
||
|
||
// 记录当前状态以检测变化
|
||
const wasOpen = sidebar.classList.contains('open');
|
||
const shouldBeOpen = hasTop || hasBottom;
|
||
const stateChanged = wasOpen !== shouldBeOpen;
|
||
|
||
if (!hasTop && !hasBottom) {
|
||
sidebar.classList.remove('open');
|
||
sidebar.style.width = '0';
|
||
contentTop.classList.remove('active', 'full-height');
|
||
contentBottom.classList.remove('active', 'full-height');
|
||
verticalHandle.classList.remove('active');
|
||
// 只在侧边栏状态真正改变时调整热力图大小
|
||
if (stateChanged) {
|
||
resizeHeatmap();
|
||
}
|
||
return;
|
||
}
|
||
|
||
sidebar.classList.add('open');
|
||
if (sidebarWidths[side]) {
|
||
sidebar.style.width = sidebarWidths[side] + 'px';
|
||
} else {
|
||
sidebar.style.width = '320px';
|
||
}
|
||
// 只在侧边栏状态真正改变时调整热力图大小
|
||
if (stateChanged) {
|
||
resizeHeatmap();
|
||
}
|
||
|
||
if (hasTop && hasBottom) {
|
||
contentTop.classList.add('active');
|
||
contentTop.classList.remove('full-height');
|
||
contentBottom.classList.add('active');
|
||
contentBottom.classList.remove('full-height');
|
||
verticalHandle.classList.add('active');
|
||
|
||
if (splitHeights[side]) {
|
||
contentTop.style.height = splitHeights[side] + 'px';
|
||
contentBottom.style.flex = '1';
|
||
} else {
|
||
contentTop.style.height = '50%';
|
||
contentBottom.style.flex = '1';
|
||
}
|
||
} else if (hasTop) {
|
||
contentTop.classList.add('active', 'full-height');
|
||
contentBottom.classList.remove('active', 'full-height');
|
||
verticalHandle.classList.remove('active');
|
||
contentTop.style.height = '';
|
||
contentTop.style.flex = '';
|
||
contentBottom.style.flex = '';
|
||
} else {
|
||
contentTop.classList.remove('active', 'full-height');
|
||
contentBottom.classList.add('active', 'full-height');
|
||
verticalHandle.classList.remove('active');
|
||
contentBottom.style.height = '';
|
||
contentTop.style.flex = '';
|
||
contentBottom.style.flex = '';
|
||
}
|
||
}
|
||
|
||
// 初始化侧边栏
|
||
function initializeSidebar() {
|
||
// *** 关键改动：首先预加载所有面板内容 ***
|
||
preloadAllPanels();
|
||
|
||
const buttons = document.querySelectorAll('.icon-btn');
|
||
|
||
buttons.forEach(button => {
|
||
button.addEventListener('mousedown', function (e) {
|
||
dragState.draggedButton = this;
|
||
dragState.startX = e.clientX;
|
||
dragState.startY = e.clientY;
|
||
dragState.hasMoved = false;
|
||
e.preventDefault();
|
||
});
|
||
|
||
button.addEventListener('click', function () {
|
||
if (dragState.hasMoved) {
|
||
return;
|
||
}
|
||
|
||
const side = this.dataset.side;
|
||
const position = this.dataset.position;
|
||
const panel = this.dataset.panel;
|
||
|
||
if (activeButtons[side][position] === this) {
|
||
this.classList.remove('active');
|
||
activeButtons[side][position] = null;
|
||
} else {
|
||
if (activeButtons[side][position]) {
|
||
activeButtons[side][position].classList.remove('active');
|
||
}
|
||
|
||
this.classList.add('active');
|
||
activeButtons[side][position] = this;
|
||
|
||
updateSidebarContent(side, position, panel);
|
||
}
|
||
|
||
updateSidebarState(side);
|
||
});
|
||
});
|
||
|
||
document.addEventListener('mousemove', function (e) {
|
||
if (!dragState.draggedButton) return;
|
||
|
||
const deltaX = Math.abs(e.clientX - dragState.startX);
|
||
const deltaY = Math.abs(e.clientY - dragState.startY);
|
||
|
||
if (!dragState.isDragging && (deltaX > dragState.dragThreshold || deltaY > dragState.dragThreshold)) {
|
||
startDragging(e);
|
||
}
|
||
|
||
if (dragState.isDragging) {
|
||
updateDragGhost(e);
|
||
updateDropIndicator(e);
|
||
}
|
||
});
|
||
|
||
document.addEventListener('mouseup', function (e) {
|
||
if (dragState.isDragging) {
|
||
finishDragging(e);
|
||
} else {
|
||
dragState.draggedButton = null;
|
||
}
|
||
});
|
||
|
||
// 初始化调整大小逻辑
|
||
initializeResizeHandles();
|
||
|
||
// 触发默认激活的按钮
|
||
triggerDefaultActiveButtons();
|
||
}
|
||
|
||
// 初始化调整大小手柄
|
||
function initializeResizeHandles() {
|
||
const resizeHandles = document.querySelectorAll('.resize-handle');
|
||
|
||
resizeHandles.forEach(handle => {
|
||
let isResizing = false;
|
||
let sidebar = null;
|
||
let startX = 0;
|
||
let startWidth = 0;
|
||
let resizeTimer = null;
|
||
const side = handle.dataset.side;
|
||
|
||
handle.addEventListener('mousedown', function (e) {
|
||
sidebar = document.getElementById(`${side}Sidebar`);
|
||
if (!sidebar.classList.contains('open')) return;
|
||
|
||
isResizing = true;
|
||
startX = e.clientX;
|
||
startWidth = sidebar.offsetWidth;
|
||
handle.classList.add('dragging');
|
||
|
||
e.preventDefault();
|
||
});
|
||
|
||
document.addEventListener('mousemove', function (e) {
|
||
if (!isResizing) return;
|
||
|
||
let newWidth;
|
||
if (side === 'left') {
|
||
newWidth = startWidth + (e.clientX - startX);
|
||
} else {
|
||
newWidth = startWidth - (e.clientX - startX);
|
||
}
|
||
|
||
newWidth = Math.max(250, Math.min(newWidth, 600));
|
||
|
||
sidebar.style.width = newWidth + 'px';
|
||
|
||
// 节流resize调用，避免过于频繁
|
||
if (resizeTimer) {
|
||
clearTimeout(resizeTimer);
|
||
}
|
||
resizeTimer = setTimeout(() => {
|
||
resizeHeatmap();
|
||
}, 50);
|
||
});
|
||
|
||
document.addEventListener('mouseup', function () {
|
||
if (isResizing) {
|
||
isResizing = false;
|
||
handle.classList.remove('dragging');
|
||
|
||
if (sidebar) {
|
||
sidebarWidths[side] = sidebar.offsetWidth;
|
||
|
||
try {
|
||
localStorage.setItem('sidebarWidths_testPage', JSON.stringify(sidebarWidths));
|
||
} catch (e) {
|
||
console.error('保存侧边栏宽度失败', e);
|
||
}
|
||
|
||
// 调整完成后，resize热力图
|
||
resizeHeatmap();
|
||
}
|
||
}
|
||
});
|
||
});
|
||
|
||
// 垂直调整大小
|
||
const verticalResizeHandles = document.querySelectorAll('.vertical-resize-handle');
|
||
|
||
verticalResizeHandles.forEach(handle => {
|
||
let isResizing = false;
|
||
let contentTop = null;
|
||
let startY = 0;
|
||
let startHeight = 0;
|
||
const side = handle.dataset.side;
|
||
|
||
handle.addEventListener('mousedown', function (e) {
|
||
if (!handle.classList.contains('active')) return;
|
||
|
||
contentTop = document.getElementById(`${side}ContentTop`);
|
||
|
||
isResizing = true;
|
||
startY = e.clientY;
|
||
startHeight = contentTop.offsetHeight;
|
||
handle.classList.add('dragging');
|
||
|
||
e.preventDefault();
|
||
});
|
||
|
||
document.addEventListener('mousemove', function (e) {
|
||
if (!isResizing) return;
|
||
|
||
const deltaY = e.clientY - startY;
|
||
const newHeight = startHeight + deltaY;
|
||
|
||
const sidebar = document.getElementById(`${side}Sidebar`);
|
||
const totalHeight = sidebar.offsetHeight;
|
||
|
||
const minHeight = 100;
|
||
const maxHeight = totalHeight - minHeight - 4;
|
||
|
||
const clampedHeight = Math.max(minHeight, Math.min(newHeight, maxHeight));
|
||
|
||
contentTop.style.height = clampedHeight + 'px';
|
||
});
|
||
|
||
document.addEventListener('mouseup', function () {
|
||
if (isResizing) {
|
||
isResizing = false;
|
||
handle.classList.remove('dragging');
|
||
|
||
if (contentTop) {
|
||
splitHeights[side] = contentTop.offsetHeight;
|
||
|
||
try {
|
||
localStorage.setItem('splitHeights_testPage', JSON.stringify(splitHeights));
|
||
} catch (e) {
|
||
console.error('保存分区高度失败', e);
|
||
}
|
||
}
|
||
}
|
||
});
|
||
});
|
||
}
|
||
|
||
// 触发默认激活的按钮
|
||
function triggerDefaultActiveButtons() {
|
||
// 左上默认激活: dataSource
|
||
const leftTopBtn = document.querySelector('[data-side="left"][data-position="top"][data-panel="dataSource"]');
|
||
if (leftTopBtn) {
|
||
leftTopBtn.click();
|
||
}
|
||
|
||
// 左下默认激活: chartControl
|
||
const leftBottomBtn = document.querySelector('[data-side="left"][data-position="bottom"][data-panel="chartControl"]');
|
||
if (leftBottomBtn) {
|
||
leftBottomBtn.click();
|
||
}
|
||
|
||
// 右上默认激活: statistics（统计信息）
|
||
const statisticsBtn = document.querySelector('[data-side="right"][data-position="top"][data-panel="statistics"]');
|
||
if (statisticsBtn) {
|
||
statisticsBtn.click();
|
||
}
|
||
|
||
// 右下默认激活: filters（筛选器控制）
|
||
const filtersBtn = document.querySelector('[data-side="right"][data-position="bottom"][data-panel="filters"]');
|
||
if (filtersBtn) {
|
||
filtersBtn.click();
|
||
}
|
||
}
|
||
|
||
// =====
|
||
// 拖动功能相关函数
|
||
// =====
|
||
|
||
// 开始拖动
|
||
function startDragging(e) {
|
||
dragState.isDragging = true;
|
||
dragState.hasMoved = true;
|
||
|
||
// 添加拖动样式
|
||
dragState.draggedButton.classList.add('dragging');
|
||
|
||
// 创建幽灵图标
|
||
const ghost = document.createElement('div');
|
||
ghost.className = 'drag-ghost';
|
||
ghost.innerHTML = dragState.draggedButton.innerHTML;
|
||
document.body.appendChild(ghost);
|
||
dragState.dragGhost = ghost;
|
||
|
||
// 创建放置指示器
|
||
const indicator = document.createElement('div');
|
||
indicator.className = 'drop-indicator';
|
||
dragState.dropIndicator = indicator;
|
||
|
||
updateDragGhost(e);
|
||
}
|
||
|
||
// 更新幽灵图标位置
|
||
function updateDragGhost(e) {
|
||
if (dragState.dragGhost) {
|
||
dragState.dragGhost.style.left = e.clientX + 'px';
|
||
dragState.dragGhost.style.top = e.clientY + 'px';
|
||
}
|
||
}
|
||
|
||
// 更新放置指示器位置
|
||
function updateDropIndicator(e) {
|
||
if (!dragState.dropIndicator) return;
|
||
|
||
// 获取鼠标位置下的目标位置
|
||
const dropTarget = getDropTarget(e);
|
||
|
||
// 移除现有的指示器
|
||
if (dragState.dropIndicator.parentNode) {
|
||
dragState.dropIndicator.remove();
|
||
}
|
||
|
||
if (dropTarget) {
|
||
if (dropTarget.isEmpty) {
|
||
// 空分组: 将指示器放在分组中间
|
||
dropTarget.element.appendChild(dragState.dropIndicator);
|
||
} else {
|
||
// 有按钮的分组: 在目标按钮前后插入指示器
|
||
if (dropTarget.before) {
|
||
dropTarget.element.parentNode.insertBefore(dragState.dropIndicator, dropTarget.element);
|
||
} else {
|
||
dropTarget.element.parentNode.insertBefore(dragState.dropIndicator, dropTarget.element.nextSibling);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// 获取放置目标位置
|
||
function getDropTarget(e) {
|
||
// 获取所有图标栏(左右两侧)
|
||
const leftIconBar = document.querySelector('.left-icon-bar');
|
||
const rightIconBar = document.querySelector('.right-icon-bar');
|
||
const iconBars = [leftIconBar, rightIconBar];
|
||
|
||
let closestTarget = null;
|
||
let closestDistance = Infinity;
|
||
|
||
iconBars.forEach(iconBar => {
|
||
const barRect = iconBar.getBoundingClientRect();
|
||
|
||
// 扩大横轴的有效范围: 左右各扩展 100px
|
||
const expandedLeft = barRect.left - 100;
|
||
const expandedRight = barRect.right + 100;
|
||
|
||
// 检查鼠标横轴是否在扩展后的图标栏范围内
|
||
if (e.clientX >= expandedLeft && e.clientX <= expandedRight) {
|
||
// 获取该图标栏的上下两个分组
|
||
const topGroup = iconBar.querySelector('.icon-group-top');
|
||
const bottomGroup = iconBar.querySelector('.icon-group-bottom');
|
||
const groups = [
|
||
{ element: topGroup, position: 'top' },
|
||
{ element: bottomGroup, position: 'bottom' }
|
||
];
|
||
|
||
groups.forEach(({ element: group }) => {
|
||
if (!group) return;
|
||
|
||
const groupRect = group.getBoundingClientRect();
|
||
const buttons = group.querySelectorAll('.icon-btn:not(.dragging)');
|
||
|
||
if (buttons.length === 0) {
|
||
// 空分组处理
|
||
// 计算鼠标到分组区域的距离
|
||
let distanceToGroup;
|
||
|
||
if (e.clientY < groupRect.top) {
|
||
distanceToGroup = groupRect.top - e.clientY;
|
||
} else if (e.clientY > groupRect.bottom) {
|
||
distanceToGroup = e.clientY - groupRect.bottom;
|
||
} else {
|
||
distanceToGroup = 0; // 鼠标在分组内
|
||
}
|
||
|
||
// 为空分组增加更大的容错范围(纵轴方向150px)
|
||
if (distanceToGroup <= 150) {
|
||
if (distanceToGroup < closestDistance) {
|
||
closestDistance = distanceToGroup;
|
||
closestTarget = {
|
||
element: group,
|
||
before: false,
|
||
isEmpty: true
|
||
};
|
||
}
|
||
}
|
||
} else {
|
||
// 有按钮的分组
|
||
buttons.forEach(btn => {
|
||
const btnRect = btn.getBoundingClientRect();
|
||
const btnCenterY = btnRect.top + btnRect.height / 2;
|
||
const distance = Math.abs(e.clientY - btnCenterY);
|
||
|
||
if (distance < closestDistance) {
|
||
closestDistance = distance;
|
||
closestTarget = {
|
||
element: btn,
|
||
before: e.clientY < btnCenterY,
|
||
isEmpty: false
|
||
};
|
||
}
|
||
});
|
||
}
|
||
});
|
||
}
|
||
});
|
||
|
||
return closestTarget;
|
||
}
|
||
|
||
// 完成拖动
|
||
function finishDragging(e) {
|
||
const dropTarget = getDropTarget(e);
|
||
|
||
if (dropTarget) {
|
||
// 执行图标重新排列
|
||
moveButton(dragState.draggedButton, dropTarget);
|
||
}
|
||
|
||
// 清理拖动状态
|
||
if (dragState.dragGhost) {
|
||
dragState.dragGhost.remove();
|
||
dragState.dragGhost = null;
|
||
}
|
||
|
||
if (dragState.dropIndicator && dragState.dropIndicator.parentNode) {
|
||
dragState.dropIndicator.remove();
|
||
}
|
||
dragState.dropIndicator = null;
|
||
|
||
if (dragState.draggedButton) {
|
||
dragState.draggedButton.classList.remove('dragging');
|
||
}
|
||
|
||
dragState.isDragging = false;
|
||
dragState.draggedButton = null;
|
||
}
|
||
|
||
// 移动按钮到新位置
|
||
function moveButton(button, dropTarget) {
|
||
// 获取按钮原来的信息
|
||
const oldSide = button.dataset.side;
|
||
const oldPosition = button.dataset.position;
|
||
const wasActive = button.classList.contains('active');
|
||
const panel = button.dataset.panel;
|
||
|
||
// 确定新的side和position
|
||
let newSide, newPosition;
|
||
|
||
if (dropTarget.isEmpty) {
|
||
// 空分组
|
||
const group = dropTarget.element;
|
||
const iconBar = group.closest('.left-icon-bar, .right-icon-bar');
|
||
newSide = iconBar.classList.contains('left-icon-bar') ? 'left' : 'right';
|
||
newPosition = group.classList.contains('icon-group-top') ? 'top' : 'bottom';
|
||
|
||
// 移动按钮到空分组
|
||
group.appendChild(button);
|
||
} else {
|
||
// 有按钮的分组
|
||
const targetButton = dropTarget.element;
|
||
const group = targetButton.closest('.icon-group-top, .icon-group-bottom');
|
||
const iconBar = group.closest('.left-icon-bar, .right-icon-bar');
|
||
newSide = iconBar.classList.contains('left-icon-bar') ? 'left' : 'right';
|
||
newPosition = group.classList.contains('icon-group-top') ? 'top' : 'bottom';
|
||
|
||
// 移动按钮
|
||
if (dropTarget.before) {
|
||
group.insertBefore(button, targetButton);
|
||
} else {
|
||
group.insertBefore(button, targetButton.nextSibling);
|
||
}
|
||
}
|
||
|
||
// 更新按钮的数据属性
|
||
button.dataset.side = newSide;
|
||
button.dataset.position = newPosition;
|
||
|
||
// 处理激活状态变化
|
||
if (wasActive) {
|
||
// 清除旧位置的激活状态
|
||
activeButtons[oldSide][oldPosition] = null;
|
||
|
||
// 检查新位置是否已有激活按钮
|
||
if (activeButtons[newSide][newPosition]) {
|
||
activeButtons[newSide][newPosition].classList.remove('active');
|
||
}
|
||
|
||
// 设置新位置的激活状态
|
||
activeButtons[newSide][newPosition] = button;
|
||
|
||
// 更新内容
|
||
updateSidebarContent(newSide, newPosition, panel);
|
||
|
||
// 更新两侧的侧边栏状态
|
||
updateSidebarState(oldSide);
|
||
updateSidebarState(newSide);
|
||
}
|
||
|
||
// 保存按钮布局
|
||
saveButtonLayout();
|
||
}
|
||
|
||
// 保存按钮布局到localStorage
|
||
function saveButtonLayout() {
|
||
const layout = {
|
||
left: { top: [], bottom: [] },
|
||
right: { top: [], bottom: [] }
|
||
};
|
||
|
||
// 收集所有按钮的布局信息
|
||
document.querySelectorAll('.icon-btn').forEach(btn => {
|
||
const side = btn.dataset.side;
|
||
const position = btn.dataset.position;
|
||
const panel = btn.dataset.panel;
|
||
|
||
layout[side][position].push(panel);
|
||
});
|
||
|
||
try {
|
||
localStorage.setItem('buttonLayout_testPage', JSON.stringify(layout));
|
||
} catch (e) {
|
||
console.error('保存按钮布局失败', e);
|
||
}
|
||
}
|
||
|
||
// 从localStorage恢复按钮布局
|
||
function restoreButtonLayout() {
|
||
try {
|
||
const savedLayout = localStorage.getItem('buttonLayout_testPage');
|
||
if (!savedLayout) return;
|
||
|
||
const layout = JSON.parse(savedLayout);
|
||
|
||
// 重新组织按钮
|
||
Object.keys(layout).forEach(side => {
|
||
Object.keys(layout[side]).forEach(position => {
|
||
const panels = layout[side][position];
|
||
const group = document.querySelector(`.${side}-icon-bar .icon-group-${position}`);
|
||
|
||
panels.forEach(panel => {
|
||
const button = document.querySelector(`.icon-btn[data-panel="${panel}"]`);
|
||
if (button && group) {
|
||
button.dataset.side = side;
|
||
button.dataset.position = position;
|
||
group.appendChild(button);
|
||
}
|
||
});
|
||
});
|
||
});
|
||
} catch (e) {
|
||
console.error('恢复按钮布局失败', e);
|
||
}
|
||
}
|
||
|
||
// 页面加载时初始化侧边栏
|
||
document.addEventListener('DOMContentLoaded', function () {
|
||
restoreButtonLayout(); // 先恢复布局
|
||
initializeSidebar();
|
||
});
|
||
|
||
// =====
|
||
// 全局变量定义区
|
||
// =====
|
||
|
||
// --- 原始数据相关 ---
|
||
let filteredMatrix = null;
|
||
let currentXData = [];
|
||
let currentYData = [];
|
||
let currentXLabels = [];
|
||
let currentYLabels = [];
|
||
let xAvailableFields = [];
|
||
let yAvailableFields = [];
|
||
let availableCollections = [];
|
||
|
||
// --- 多图管理相关 ---
|
||
let allSimilarityResults = []; // 存储所有相似度矩阵结果，每个元素包含 visualConfig
|
||
|
||
// --- 全局默认配色（非可视化控制值的一部分，是全局UI设置） ---
|
||
let currentColorScheme = 'viridis';
|
||
let differenceMatrices = {}; // 存储差值矩阵的缓存 key格式: "idx1-idx2"
|
||
let currentMatrixIndex = 0; // 当前显示的矩阵索引
|
||
|
||
// =====
|
||
// 新架构：全局UI状态管理（与图表配置完全分离）
|
||
// =====
|
||
|
||
// 全局UI状态（独立于任何图表）
|
||
let globalUIState = {
|
||
// 数值来源：应用数据按钮控制
|
||
dataSource: {
|
||
primaryIndex: null, // 主数据源索引（第一个按下应用数据的图）
|
||
subtractIndex: null, // 减数索引（第二个按下应用数据的图，差值模式）
|
||
currentMatrix: null, // 当前显示的矩阵数据（原始或差值）
|
||
currentXData: [],
|
||
currentYData: [],
|
||
currentXLabels: [],
|
||
currentYLabels: [],
|
||
xAvailableFields: [],
|
||
yAvailableFields: []
|
||
},
|
||
|
||
// 字段配置：跟随主数据源，可独立修改
|
||
displayFields: {
|
||
xField: null,
|
||
yField: null
|
||
},
|
||
|
||
// 筛选器：可以来自多个图（或逻辑）
|
||
filters: {
|
||
activeFilterIndices: [], // 应用筛选器按钮选中的图表索引
|
||
// 当前UI显示的筛选器值（独占模式下可编辑）
|
||
uiState: {
|
||
similarityRange: { min: 0, max: 1 },
|
||
topK: { value: 0, axis: 'x' }
|
||
}
|
||
},
|
||
|
||
// 临时筛选器：非独占模式下的UI控件值，与已启用筛选器做AND运算
|
||
// 进入独占模式或差值模式时重置
|
||
temporaryFilter: {
|
||
enabled: false, // 是否启用临时筛选器（当用户调整UI控件时自动启用）
|
||
similarityRange: { min: 0, max: 1 },
|
||
topK: { value: 0, axis: 'x' }
|
||
},
|
||
|
||
// 排序：跟随字段配置，可独立修改
|
||
sorting: {
|
||
order: 'none'
|
||
},
|
||
|
||
// 独占模式
|
||
exclusiveMode: {
|
||
active: false,
|
||
editingIndex: null // 正在编辑的图表索引
|
||
},
|
||
|
||
// 筛选器标签页（减数模式下使用）
|
||
filterTab: {
|
||
activeTab: 'main' // 'main' | 'subtract'
|
||
}
|
||
};
|
||
|
||
// 每张图的按钮状态
|
||
let matrixButtonStates = [];
|
||
// 结构示例：
|
||
// {
|
||
// index: 0,
|
||
// applyData: false, // 应用数据按钮
|
||
// applyFilter: false, // 应用筛选器按钮
|
||
// exclusive: false // 独占模式按钮
|
||
// }
|
||
|
||
|
||
const DEFAULT_FIELD_NAMES = ['document', 'text', 'name'];
|
||
|
||
// API配置 - 直接使用当前系统的API端点
|
||
const API_BASE_URL = '/api/knowledge/similarity';
|
||
|
||
// =====
|
||
// 可视化配置管理
|
||
// =====
|
||
|
||
/**
|
||
* 创建默认的可视化配置对象
|
||
* 每张图都有独立的可视化控制值
|
||
*/
|
||
function createDefaultVisualConfig(xAvailableFields, yAvailableFields) {
|
||
const defaultXField = getDefaultDisplayField(xAvailableFields);
|
||
const defaultYField = getDefaultDisplayField(yAvailableFields);
|
||
|
||
return {
|
||
// 1. 显示字段配置
|
||
displayFields: {
|
||
xField: defaultXField, // 横坐标显示字段
|
||
yField: defaultYField // 纵坐标显示字段
|
||
},
|
||
|
||
// 2. 显示值范围配置（相似度阈值）
|
||
similarityRange: {
|
||
min: 0,
|
||
max: 1
|
||
},
|
||
|
||
// 3. 筛选器配置
|
||
filters: {
|
||
topK: {
|
||
value: 0, // Top-K值，0表示显示全部
|
||
axis: 'x' // 'x' 或 'y'
|
||
}
|
||
// 注意：阈值范围本身也起到筛选作用，已在 similarityRange 中定义
|
||
},
|
||
|
||
// 4. 排序配置
|
||
sorting: {
|
||
order: 'none' // 'none', 'asc', 'desc', 'x_asc', 'x_desc', 'y_asc', 'y_desc'
|
||
},
|
||
|
||
// 5. 布尔矩阵缓存（新增）
|
||
cachedMasks: {
|
||
thresholdMask: null, // 阈值筛选的布尔矩阵
|
||
topKMask: null, // Top-K筛选的布尔矩阵
|
||
finalMask: null // AND合并后的最终遮罩
|
||
}
|
||
};
|
||
}
|
||
|
||
|
||
// =====
|
||
// 常量配置
|
||
// =====
|
||
|
||
// 颜色方案配置
|
||
const colorSchemes = {
|
||
viridis: 'Viridis',
|
||
plasma: 'Plasma',
|
||
cividis: 'Cividis',
|
||
hot: 'Hot',
|
||
YlGnBu: 'YlGnBu',
|
||
|
||
};
|
||
|
||
// =====
|
||
// UI辅助函数
|
||
// =====
|
||
|
||
// 消息显示函数
|
||
/**
|
||
* 显示右上角临时消息
|
||
* @param {string} type - 消息类型: 'error', 'success', 'warning', 'info'
|
||
* @param {string} message - 消息内容
|
||
* @param {number} duration - 显示时长(毫秒),默认根据类型自动设置
|
||
*/
|
||
function showMessage(type, message, duration = 0) {
|
||
// 根据类型设置默认显示时长
|
||
if (duration === 0) {
|
||
const defaultDurations = {
|
||
'error': 5000,
|
||
'success': 3000,
|
||
'warning': 4000,
|
||
'info': 3000
|
||
};
|
||
duration = defaultDurations[type] || 3000;
|
||
}
|
||
|
||
// 创建消息元素
|
||
const messageEl = document.createElement('div');
|
||
messageEl.className = `temp-message ${type}`;
|
||
messageEl.textContent = message;
|
||
|
||
// 添加到页面
|
||
document.body.appendChild(messageEl);
|
||
|
||
// 自动移除
|
||
setTimeout(() => {
|
||
messageEl.style.animation = 'slideOut 0.3s ease';
|
||
setTimeout(() => {
|
||
if (document.body.contains(messageEl)) {
|
||
document.body.removeChild(messageEl);
|
||
}
|
||
}, 300);
|
||
}, duration);
|
||
}
|
||
|
||
function showError(message, duration = 5000) { showMessage('error', message, duration); }
|
||
function showSuccess(message, duration = 3000) { showMessage('success', message, duration); }
|
||
function showWarning(message, duration = 4000) { showMessage('warning', message, duration); }
|
||
function showInfo(message, duration = 3000) { showMessage('info', message, duration); }
|
||
|
||
/**
|
||
* 截断collection名称
|
||
* @param {string} name - collection名称
|
||
* @param {number} maxLength - 最大长度
|
||
* @returns {string} 截断后的名称
|
||
*/
|
||
function truncateCollectionName(name, maxLength = 20) {
|
||
if (!name) return '';
|
||
if (name.length <= maxLength) return name;
|
||
return name.substring(0, maxLength - 3) + '...';
|
||
}
|
||
|
||
// 显示加载状态
|
||
function showLoading(show = true, text = '正在加载...') {
|
||
document.getElementById('loading').style.display = show ? 'block' : 'none';
|
||
document.getElementById('loadingText').textContent = text;
|
||
}
|
||
|
||
// 显示必要字段验证错误
|
||
function showFieldValidationError(fieldId, show = true) {
|
||
const field = document.getElementById(fieldId);
|
||
const errorDiv = document.getElementById(fieldId + 'Error');
|
||
|
||
if (show) {
|
||
if (field) field.classList.add('required-empty');
|
||
if (errorDiv) errorDiv.style.display = 'block';
|
||
} else {
|
||
if (field) field.classList.remove('required-empty');
|
||
if (errorDiv) errorDiv.style.display = 'none';
|
||
}
|
||
}
|
||
|
||
// 清除所有验证错误状态
|
||
function clearValidationErrors() {
|
||
const xError = document.getElementById('xCollectionError');
|
||
const yError = document.getElementById('yCollectionError');
|
||
|
||
if (xError) xError.style.display = 'none';
|
||
if (yError) yError.style.display = 'none';
|
||
}
|
||
|
||
// 获取默认显示字段函数
|
||
function getDefaultDisplayField(availableFields) {
|
||
// 遍历优先级列表，返回第一个匹配的字段
|
||
for (const defaultField of DEFAULT_FIELD_NAMES) {
|
||
if (availableFields.includes(defaultField)) {
|
||
return defaultField;
|
||
}
|
||
}
|
||
// 如果没有匹配的默认字段，返回 'order_id'
|
||
return 'order_id';
|
||
}
|
||
|
||
/**
|
||
* 文本自动换行函数 - 用于热力图悬浮提示
|
||
* @param {string} text - 需要换行的文本
|
||
* @param {number} maxCharsPerLine - 每行最大字符数（默认50）
|
||
* @returns {string} - 换行后的文本
|
||
*/
|
||
function wrapTextForTooltip(text, maxCharsPerLine = 50) {
|
||
if (!text || typeof text !== 'string') {
|
||
return 'N/A';
|
||
}
|
||
|
||
// 如果文本长度小于等于最大字符数，直接返回
|
||
if (text.length <= maxCharsPerLine) {
|
||
return text;
|
||
}
|
||
|
||
const lines = [];
|
||
let currentPos = 0;
|
||
|
||
while (currentPos < text.length) {
|
||
// 如果剩余文本小于最大字符数，直接添加
|
||
if (currentPos + maxCharsPerLine >= text.length) {
|
||
lines.push(text.substring(currentPos));
|
||
break;
|
||
}
|
||
|
||
// 尝试在最大字符数附近找到合适的断点（空格、标点符号等）
|
||
let breakPos = currentPos + maxCharsPerLine;
|
||
const searchStart = Math.max(currentPos, breakPos - 10); // 向前搜索10个字符
|
||
|
||
// 查找最近的空格或标点符号作为断点
|
||
const breakChars = [' ', '，', '。', '、', '；', '：', '！', '？', ',', '.', ';', ':', '!', '?'];
|
||
let foundBreak = false;
|
||
|
||
for (let i = breakPos; i >= searchStart; i--) {
|
||
if (breakChars.includes(text[i])) {
|
||
breakPos = i + 1; // 在标点符号后断开
|
||
foundBreak = true;
|
||
break;
|
||
}
|
||
}
|
||
|
||
// 如果没找到合适的断点，就在最大字符数处强制断开
|
||
if (!foundBreak) {
|
||
breakPos = currentPos + maxCharsPerLine;
|
||
}
|
||
|
||
lines.push(text.substring(currentPos, breakPos));
|
||
currentPos = breakPos;
|
||
}
|
||
|
||
// 使用 HTML <br> 标签连接各行
|
||
return lines.join('<br>');
|
||
}
|
||
|
||
// =====
|
||
// API调用与数据加载
|
||
// =====
|
||
|
||
// API调用函数
|
||
async function apiCall(endpoint, options = {}) {
|
||
const url = `${API_BASE_URL}${endpoint}`;
|
||
const defaultOptions = {
|
||
headers: { 'Content-Type': 'application/json' }
|
||
};
|
||
|
||
const finalOptions = { ...defaultOptions, ...options };
|
||
|
||
try {
|
||
const response = await fetch(url, finalOptions);
|
||
const data = await response.json();
|
||
|
||
if (!response.ok) {
|
||
throw new Error(data.error || data.detail || `HTTP ${response.status}`);
|
||
}
|
||
|
||
if (data.success === false) {
|
||
throw new Error(data.error || '未知错误');
|
||
}
|
||
|
||
return data;
|
||
} catch (error) {
|
||
console.error('API调用失败:', error);
|
||
throw error;
|
||
}
|
||
}
|
||
|
||
// 修改loadCollections函数
|
||
async function loadCollections() {
|
||
try {
|
||
showLoading(true, '正在加载Collections...');
|
||
|
||
const data = await apiCall('/collections');
|
||
const collections = data.collections || [];
|
||
|
||
// 更新全局变量
|
||
availableCollections = collections;
|
||
|
||
// 更新所有现有的选择框
|
||
updateAllCollectionSelects();
|
||
|
||
showSuccess(`成功加载 ${collections.length} 个Collections`);
|
||
|
||
} catch (error) {
|
||
showError('加载Collections失败: ' + error.message);
|
||
} finally {
|
||
showLoading(false);
|
||
}
|
||
}
|
||
|
||
// 新增：更新所有collection选择框
|
||
function updateAllCollectionSelects() {
|
||
// 更新所有X轴选择框
|
||
const xSelects = document.querySelectorAll('.x-collection-select');
|
||
xSelects.forEach(select => {
|
||
updateSingleCollectionSelect(select);
|
||
});
|
||
|
||
// 更新所有Y轴选择框
|
||
const ySelects = document.querySelectorAll('.y-collection-select');
|
||
ySelects.forEach(select => {
|
||
updateSingleCollectionSelect(select);
|
||
});
|
||
}
|
||
|
||
// 新增：更新单个collection选择框
|
||
function updateSingleCollectionSelect(select) {
|
||
const currentValue = select.value;
|
||
select.innerHTML = '<option value="">请选择...</option>';
|
||
|
||
availableCollections.forEach(collection => {
|
||
const option = new Option(collection, collection);
|
||
select.add(option);
|
||
});
|
||
|
||
// 如果之前有选中值且该值仍然存在，保持选中
|
||
if (currentValue && availableCollections.includes(currentValue)) {
|
||
select.value = currentValue;
|
||
}
|
||
}
|
||
|
||
// 修改addCollectionSelect函数
|
||
function addCollectionSelect(axis) {
|
||
const containerId = axis === 'x' ? 'xCollectionContainer' : 'yCollectionContainer';
|
||
const container = document.getElementById(containerId);
|
||
const selectClass = axis === 'x' ? 'x-collection-select' : 'y-collection-select';
|
||
|
||
// 创建新的选择框行
|
||
const newRow = document.createElement('div');
|
||
newRow.className = 'collection-select-row';
|
||
|
||
// 创建select元素
|
||
const newSelect = document.createElement('select');
|
||
newSelect.className = selectClass;
|
||
|
||
// 使用全局变量填充options
|
||
updateSingleCollectionSelect(newSelect);
|
||
|
||
// 创建删除按钮
|
||
const removeBtn = document.createElement('button');
|
||
removeBtn.type = 'button';
|
||
removeBtn.className = 'btn-remove-collection';
|
||
removeBtn.textContent = '-';
|
||
removeBtn.title = '删除';
|
||
removeBtn.onclick = function () {
|
||
removeCollectionSelect(this);
|
||
};
|
||
|
||
newRow.appendChild(newSelect);
|
||
newRow.appendChild(removeBtn);
|
||
container.appendChild(newRow);
|
||
|
||
// 清除验证错误
|
||
const fieldId = axis === 'x' ? 'xCollection' : 'yCollection';
|
||
showFieldValidationError(fieldId, false);
|
||
}
|
||
|
||
// 删除collection选择框
|
||
function removeCollectionSelect(button) {
|
||
const row = button.closest('.collection-select-row');
|
||
row.remove();
|
||
}
|
||
|
||
|
||
// =====
|
||
// 布尔矩阵计算函数（新架构核心）
|
||
// =====
|
||
|
||
/**
|
||
* 计算阈值筛选的布尔矩阵
|
||
* @param {Array<Array<number>>} matrix - 原始相似度矩阵
|
||
* @param {number} minSim - 最小相似度阈值
|
||
* @param {number} maxSim - 最大相似度阈值
|
||
* @returns {Array<Array<boolean>>} - 布尔矩阵，true表示通过筛选
|
||
*/
|
||
function computeThresholdMask(matrix, minSim, maxSim) {
|
||
const startTime = performance.now();
|
||
console.log(`[布尔矩阵] 计算阈值遮罩: ${minSim.toFixed(2)} - ${maxSim.toFixed(2)}`);
|
||
const result = matrix.map(row =>
|
||
row.map(val => {
|
||
if (val === null || val === undefined) return false;
|
||
return val >= minSim && val <= maxSim;
|
||
})
|
||
);
|
||
console.log(`[DEBUG] 计算阈值遮罩 耗时: ${((performance.now() - startTime) / 1000).toFixed(3)}s`);
|
||
return result;
|
||
}
|
||
|
||
/**
|
||
* 计算Top-K筛选的布尔矩阵
|
||
* @param {Array<Array<number>>} matrix - 原始相似度矩阵
|
||
* @param {number} topK - Top-K值，0表示全部显示
|
||
* @param {string} axis - 'x' 或 'y'
|
||
* @returns {Array<Array<boolean>>} - 布尔矩阵，true表示是Top-K
|
||
*/
|
||
function computeTopKMask(matrix, topK, axis) {
|
||
const startTime = performance.now();
|
||
console.log(`[布尔矩阵] 计算Top-K遮罩: Top-${topK}, 轴: ${axis}`);
|
||
|
||
if (topK === 0) {
|
||
// Top-K为0，全部通过
|
||
const result = matrix.map(row => row.map(() => true));
|
||
console.log(`[DEBUG] 计算Top-K遮罩 耗时: ${((performance.now() - startTime) / 1000).toFixed(3)}s`);
|
||
return result;
|
||
}
|
||
|
||
// 初始化布尔矩阵为false
|
||
const mask = matrix.map(row => row.map(() => false));
|
||
|
||
if (axis === 'x') {
|
||
// 横轴Top-K：对每一行（Y轴的每个项目），找出相似度最高的K个X轴项目
|
||
for (let i = 0; i < matrix.length; i++) {
|
||
const row = matrix[i];
|
||
const validPairs = [];
|
||
|
||
for (let j = 0; j < row.length; j++) {
|
||
const val = row[j];
|
||
if (val !== null && val !== undefined) {
|
||
validPairs.push({ index: j, similarity: val });
|
||
}
|
||
}
|
||
|
||
// 按相似度降序排序，取前K个
|
||
validPairs.sort((a, b) => b.similarity - a.similarity);
|
||
const topKPairs = validPairs.slice(0, topK);
|
||
|
||
// 在布尔矩阵中标记Top-K位置为true
|
||
topKPairs.forEach(pair => {
|
||
mask[i][pair.index] = true;
|
||
});
|
||
}
|
||
} else {
|
||
// 纵轴Top-K：对每一列（X轴的每个项目），找出相似度最高的K个Y轴项目
|
||
for (let j = 0; j < matrix[0].length; j++) {
|
||
const validPairs = [];
|
||
|
||
for (let i = 0; i < matrix.length; i++) {
|
||
const val = matrix[i][j];
|
||
if (val !== null && val !== undefined) {
|
||
validPairs.push({ index: i, similarity: val });
|
||
}
|
||
}
|
||
|
||
// 按相似度降序排序，取前K个
|
||
validPairs.sort((a, b) => b.similarity - a.similarity);
|
||
const topKPairs = validPairs.slice(0, topK);
|
||
|
||
// 在布尔矩阵中标记Top-K位置为true
|
||
topKPairs.forEach(pair => {
|
||
mask[pair.index][j] = true;
|
||
});
|
||
}
|
||
}
|
||
|
||
console.log(`[DEBUG] 计算Top-K遮罩 耗时: ${((performance.now() - startTime) / 1000).toFixed(3)}s`);
|
||
return mask;
|
||
}
|
||
|
||
/**
|
||
* 单图内AND合并：阈值遮罩 AND Top-K遮罩
|
||
* @param {Array<Array<boolean>>} mask1 - 第一个布尔矩阵
|
||
* @param {Array<Array<boolean>>} mask2 - 第二个布尔矩阵
|
||
* @returns {Array<Array<boolean>>} - AND运算后的布尔矩阵
|
||
*/
|
||
function combineWithAND(mask1, mask2) {
|
||
const startTime = performance.now();
|
||
console.log('[布尔矩阵] 执行AND合并');
|
||
const result = mask1.map((row, i) =>
|
||
row.map((val, j) => val && mask2[i][j])
|
||
);
|
||
console.log(`[DEBUG] AND合并 耗时: ${((performance.now() - startTime) / 1000).toFixed(3)}s`);
|
||
return result;
|
||
}
|
||
|
||
/**
|
||
* 多图间OR合并：多个最终遮罩的OR运算
|
||
* @param {Array<Array<Array<boolean>>>} masks - 多个布尔矩阵
|
||
* @returns {Array<Array<boolean>>} - OR运算后的布尔矩阵
|
||
*/
|
||
function combineWithOR(masks) {
|
||
const startTime = performance.now();
|
||
if (masks.length === 0) {
|
||
console.warn('[布尔矩阵] OR合并：没有输入遮罩');
|
||
return null;
|
||
}
|
||
|
||
if (masks.length === 1) {
|
||
console.log('[布尔矩阵] OR合并：只有一个遮罩，直接返回');
|
||
console.log(`[DEBUG] OR合并 耗时: ${((performance.now() - startTime) / 1000).toFixed(3)}s`);
|
||
return masks[0];
|
||
}
|
||
|
||
console.log(`[布尔矩阵] 执行OR合并：${masks.length}个遮罩`);
|
||
|
||
const result = masks.reduce((result, mask) =>
|
||
result.map((row, i) =>
|
||
row.map((val, j) => val || mask[i][j])
|
||
)
|
||
);
|
||
console.log(`[DEBUG] OR合并 耗时: ${((performance.now() - startTime) / 1000).toFixed(3)}s`);
|
||
return result;
|
||
}
|
||
|
||
/**
|
||
* 应用布尔遮罩到原始矩阵
|
||
* @param {Array<Array<number>>} originalMatrix - 原始数据矩阵
|
||
* @param {Array<Array<boolean>>} mask - 布尔遮罩
|
||
* @returns {Array<Array<number|null>>} - 应用遮罩后的矩阵
|
||
*/
|
||
function applyMask(originalMatrix, mask) {
|
||
const startTime = performance.now();
|
||
console.log('[布尔矩阵] 应用遮罩到原始数据');
|
||
const result = originalMatrix.map((row, i) =>
|
||
row.map((val, j) => mask[i][j] ? val : null)
|
||
);
|
||
console.log(`[DEBUG] 应用遮罩 耗时: ${((performance.now() - startTime) / 1000).toFixed(3)}s`);
|
||
return result;
|
||
}
|
||
|
||
/**
|
||
* 获取矩阵的尺寸信息
|
||
* @param {number} index - 图表索引
|
||
* @returns {Object|null} - 返回 {rows, cols} 或 null
|
||
*/
|
||
function getMatrixSize(index) {
|
||
if (index < 0 || index >= allSimilarityResults.length) {
|
||
return null;
|
||
}
|
||
const matrix = allSimilarityResults[index].matrix;
|
||
return {
|
||
rows: matrix.length,
|
||
cols: matrix.length > 0 ? matrix[0].length : 0
|
||
};
|
||
}
|
||
|
||
/**
|
||
* 检查指定图表的矩阵大小是否与当前已启用的图表一致
|
||
* @param {number} newIndex - 要检查的图表索引
|
||
* @param {string} buttonType - 按钮类型: 'applyData' 或 'applyFilter'
|
||
* @returns {Object} - {isValid: boolean, message: string, conflictIndices: Array}
|
||
*/
|
||
function checkMatrixSizeConsistency(newIndex, buttonType) {
|
||
const newSize = getMatrixSize(newIndex);
|
||
if (!newSize) {
|
||
return { isValid: false, message: '无效的图表索引', conflictIndices: [] };
|
||
}
|
||
|
||
let activeIndices = [];
|
||
|
||
// 根据按钮类型确定需要检查的已启用图表
|
||
if (buttonType === 'applyData') {
|
||
// 检查"应用数据"按钮：需要与已启用的应用数据按钮一致
|
||
if (globalUIState.dataSource.primaryIndex !== null) {
|
||
activeIndices.push(globalUIState.dataSource.primaryIndex);
|
||
}
|
||
if (globalUIState.dataSource.subtractIndex !== null) {
|
||
activeIndices.push(globalUIState.dataSource.subtractIndex);
|
||
}
|
||
} else if (buttonType === 'applyFilter') {
|
||
// 检查"应用筛选器"按钮：需要与当前数据源一致（如果有数据源）
|
||
// 同时也需要与其他已启用的筛选器一致
|
||
if (globalUIState.dataSource.primaryIndex !== null) {
|
||
activeIndices.push(globalUIState.dataSource.primaryIndex);
|
||
}
|
||
if (globalUIState.dataSource.subtractIndex !== null) {
|
||
activeIndices.push(globalUIState.dataSource.subtractIndex);
|
||
}
|
||
// 添加其他已启用的筛选器
|
||
globalUIState.filters.activeFilterIndices.forEach(idx => {
|
||
if (!activeIndices.includes(idx)) {
|
||
activeIndices.push(idx);
|
||
}
|
||
});
|
||
}
|
||
|
||
// 如果没有已启用的图表，直接允许
|
||
if (activeIndices.length === 0) {
|
||
return { isValid: true, message: '', conflictIndices: [] };
|
||
}
|
||
|
||
// 检查是否与所有已启用的图表尺寸一致
|
||
const conflictIndices = [];
|
||
for (const activeIdx of activeIndices) {
|
||
const activeSize = getMatrixSize(activeIdx);
|
||
if (activeSize && (activeSize.rows !== newSize.rows || activeSize.cols !== newSize.cols)) {
|
||
conflictIndices.push(activeIdx);
|
||
}
|
||
}
|
||
|
||
if (conflictIndices.length > 0) {
|
||
const conflictList = conflictIndices.map(idx => `图表${idx + 1}`).join('、');
|
||
return {
|
||
isValid: false,
|
||
message: `矩阵大小不一致 (当前图: ${newSize.rows}×${newSize.cols}，已启用的${conflictList}有不同尺寸)，请先松开原按钮`,
|
||
conflictIndices: conflictIndices
|
||
};
|
||
}
|
||
|
||
return { isValid: true, message: '', conflictIndices: [] };
|
||
}
|
||
|
||
/**
|
||
* 计算单张图的最终遮罩（阈值 AND Top-K）
|
||
* @param {number} index - 图表索引
|
||
* @returns {Array<Array<boolean>>|null} - 最终布尔遮罩
|
||
*/
|
||
function computeFinalMaskForMatrix(index) {
|
||
const startTime = performance.now();
|
||
if (index < 0 || index >= allSimilarityResults.length) {
|
||
console.error(`[布尔矩阵] 无效的图表索引: ${index}`);
|
||
return null;
|
||
}
|
||
|
||
const matrixData = allSimilarityResults[index];
|
||
const config = matrixData.visualConfig;
|
||
const originalMatrix = matrixData.matrix;
|
||
|
||
console.log(`[布尔矩阵] 计算图 ${index} 的最终遮罩`);
|
||
|
||
// 1. 计算阈值遮罩
|
||
const thresholdMask = computeThresholdMask(
|
||
originalMatrix,
|
||
config.similarityRange.min,
|
||
config.similarityRange.max
|
||
);
|
||
|
||
// 2. 计算Top-K遮罩
|
||
const topKMask = computeTopKMask(
|
||
originalMatrix,
|
||
config.filters.topK.value,
|
||
config.filters.topK.axis
|
||
);
|
||
|
||
// 3. AND合并
|
||
const finalMask = combineWithAND(thresholdMask, topKMask);
|
||
|
||
// 4. 缓存到配置中
|
||
if (!config.cachedMasks) {
|
||
config.cachedMasks = {};
|
||
}
|
||
config.cachedMasks.thresholdMask = thresholdMask;
|
||
config.cachedMasks.topKMask = topKMask;
|
||
config.cachedMasks.finalMask = finalMask;
|
||
|
||
console.log(`[DEBUG] 计算图 ${index} 最终遮罩 耗时: ${((performance.now() - startTime) / 1000).toFixed(3)}s`);
|
||
return finalMask;
|
||
}
|
||
|
||
/**
|
||
* 计算临时筛选器的布尔遮罩
|
||
* 使用当前显示的矩阵数据和临时筛选器配置
|
||
* @returns {Array<Array<boolean>>|null} - 临时筛选器的布尔遮罩
|
||
*/
|
||
function computeTemporaryFilterMask() {
|
||
if (!globalUIState.temporaryFilter.enabled) {
|
||
return null;
|
||
}
|
||
|
||
const currentMatrix = globalUIState.dataSource.currentMatrix;
|
||
if (!currentMatrix) {
|
||
return null;
|
||
}
|
||
|
||
const tempFilter = globalUIState.temporaryFilter;
|
||
|
||
console.log(`[临时筛选器] 计算遮罩 - 阈值: ${tempFilter.similarityRange.min.toFixed(2)}-${tempFilter.similarityRange.max.toFixed(2)}, Top-K: ${tempFilter.topK.value} (${tempFilter.topK.axis}轴)`);
|
||
|
||
// 1. 计算阈值遮罩
|
||
const thresholdMask = computeThresholdMask(
|
||
currentMatrix,
|
||
tempFilter.similarityRange.min,
|
||
tempFilter.similarityRange.max
|
||
);
|
||
|
||
// 2. 计算Top-K遮罩
|
||
const topKMask = computeTopKMask(
|
||
currentMatrix,
|
||
tempFilter.topK.value,
|
||
tempFilter.topK.axis
|
||
);
|
||
|
||
// 3. AND合并
|
||
return combineWithAND(thresholdMask, topKMask);
|
||
}
|
||
|
||
/**
|
||
* 重置临时筛选器
|
||
* @param {boolean} isInDifferenceMode - 是否为差值模式
|
||
*/
|
||
function resetTemporaryFilter(isInDifferenceMode = false) {
|
||
const range = isInDifferenceMode ? { min: -1, max: 1 } : { min: 0, max: 1 };
|
||
|
||
globalUIState.temporaryFilter.enabled = false;
|
||
globalUIState.temporaryFilter.similarityRange = { ...range };
|
||
globalUIState.temporaryFilter.topK = { value: 0, axis: 'x' };
|
||
|
||
console.log(`[临时筛选器] 已重置 - 差值模式: ${isInDifferenceMode}, 范围: ${range.min} - ${range.max}`);
|
||
}
|
||
|
||
/**
|
||
* 将临时筛选器的值应用到UI控件
|
||
*/
|
||
function applyTemporaryFilterToUI() {
|
||
const tempFilter = globalUIState.temporaryFilter;
|
||
|
||
// 注意：这里不更新UI控件的值，因为UI控件本身就是用户交互的源头
|
||
// 这个函数主要用于重置后，确保UI状态同步
|
||
// 实际的UI更新在applyFilterStateToUI中完成
|
||
console.log(`[临时筛选器] UI已同步 - enabled: ${tempFilter.enabled}`);
|
||
}
|
||
|
||
// =====
|
||
// 数据处理与标签生成
|
||
// =====
|
||
|
||
// 生成唯一标签函数，使用零宽字符和不间断空格确保唯一性
|
||
// 刻度标签超过 MAX_LABEL_LENGTH 字符时截断，悬浮提示仍显示完整内容
|
||
function generateUniqueLabels(data, field) {
|
||
const displayValueCountMap = new Map(); // 跟踪截断后的显示值，确保 Plotly 收到的标签唯一
|
||
const MAX_LABEL_LENGTH = 10;
|
||
|
||
return data.map((item) => {
|
||
let baseValue;
|
||
if (field === 'order_id') {
|
||
baseValue = `ID-${item[field]}`;
|
||
} else {
|
||
baseValue = String(item[field] || 'N/A');
|
||
}
|
||
|
||
// 截断显示值（用于刻度标签）
|
||
let displayValue = baseValue;
|
||
if (baseValue.length > MAX_LABEL_LENGTH) {
|
||
displayValue = baseValue.slice(0, MAX_LABEL_LENGTH) + '...';
|
||
}
|
||
|
||
// 跟踪截断后显示值的出现次数（不同原始值截断后可能相同，需要区分）
|
||
const currentCount = displayValueCountMap.get(displayValue) || 0;
|
||
displayValueCountMap.set(displayValue, currentCount + 1);
|
||
|
||
// 如果显示值重复，添加零宽字符和不间断空格来确保唯一性
|
||
if (currentCount > 0) {
|
||
// 零宽字符：\u200B (零宽空格)
|
||
// 不间断空格：\u00A0
|
||
// 根据重复次数添加不同数量的零宽字符
|
||
const uniqueSuffix = '\u200B'.repeat(currentCount) + '\u00A0';
|
||
return displayValue + uniqueSuffix;
|
||
} else {
|
||
return displayValue;
|
||
}
|
||
});
|
||
}
|
||
|
||
// 生成完整标签（用于 hover 显示），最多 maxLength 字符
|
||
function generateFullLabels(data, field, maxLength = 300) {
|
||
return data.map(item => {
|
||
let text = field === 'order_id'
|
||
? `ID-${item[field]}`
|
||
: String(item[field] || 'N/A');
|
||
return text.length > maxLength ? text.slice(0, maxLength) + '...' : text;
|
||
});
|
||
}
|
||
|
||
// =====
|
||
// 可视化控制与筛选
|
||
// =====
|
||
|
||
// 设置Top-K轴选择
|
||
function setTopkAxis(axis) {
|
||
currentTopkAxis = axis;
|
||
|
||
// 更新全局筛选器状态
|
||
globalUIState.filters.uiState.topK.axis = axis;
|
||
|
||
// *** 根据当前标签页决定保存位置 ***
|
||
if (globalUIState.filterTab.activeTab === 'subtract' && globalUIState.dataSource.subtractIndex !== null) {
|
||
// 减数图筛选器标签：保存到减数图的visualConfig
|
||
const subtractIndex = globalUIState.dataSource.subtractIndex;
|
||
const config = allSimilarityResults[subtractIndex].visualConfig;
|
||
config.filters.topK.axis = axis;
|
||
|
||
// 标记布尔矩阵缓存失效（轴变化会改变Top-K结果）
|
||
if (config.cachedMasks) {
|
||
config.cachedMasks.topKMask = null;
|
||
config.cachedMasks.finalMask = null;
|
||
}
|
||
|
||
console.log(`[减数图筛选器] 保存Top-K轴: ${axis}，缓存已失效`);
|
||
} else if (globalUIState.exclusiveMode.active && globalUIState.exclusiveMode.editingIndex !== null) {
|
||
// 独占模式：保存到编辑中的图表配置
|
||
const config = allSimilarityResults[globalUIState.exclusiveMode.editingIndex].visualConfig;
|
||
config.filters.topK.axis = axis;
|
||
|
||
// 标记布尔矩阵缓存失效（轴变化会改变Top-K结果）
|
||
if (config.cachedMasks) {
|
||
config.cachedMasks.topKMask = null;
|
||
config.cachedMasks.finalMask = null;
|
||
}
|
||
|
||
console.log(`[独占模式] 保存Top-K轴: ${axis}，缓存已失效`);
|
||
} else {
|
||
// *** 非独占模式：更新临时筛选器 ***
|
||
globalUIState.temporaryFilter.enabled = true;
|
||
globalUIState.temporaryFilter.topK.axis = axis;
|
||
console.log(`[临时筛选器] 更新Top-K轴: ${axis}`);
|
||
}
|
||
|
||
// 更新按钮状态
|
||
document.getElementById('xAxisBtn').classList.toggle('active', axis === 'x');
|
||
document.getElementById('yAxisBtn').classList.toggle('active', axis === 'y');
|
||
|
||
// 更新Top-K滑块的最大值
|
||
updateTopkSliderMax();
|
||
|
||
// 更新热力图
|
||
if (filteredMatrix || globalUIState.dataSource.currentMatrix) {
|
||
updateHeatmap();
|
||
// 更新统计信息
|
||
if (globalUIState.dataSource.subtractIndex !== null) {
|
||
showDifferenceStatistics(false);
|
||
} else {
|
||
showStatistics(false);
|
||
}
|
||
}
|
||
}
|
||
|
||
// =====
|
||
// 相似度计算与矩阵管理
|
||
// =====
|
||
|
||
// 计算相似度矩阵
|
||
async function calculateSimilarity() {
|
||
// 获取所有选中的X轴collections
|
||
const xSelects = document.querySelectorAll('.x-collection-select');
|
||
const xCollections = Array.from(xSelects)
|
||
.map(select => select.value)
|
||
.filter(value => value !== '');
|
||
|
||
// 获取所有选中的Y轴collections
|
||
const ySelects = document.querySelectorAll('.y-collection-select');
|
||
const yCollections = Array.from(ySelects)
|
||
.map(select => select.value)
|
||
.filter(value => value !== '');
|
||
|
||
const xMaxItemsEl = document.getElementById('xMaxItems');
|
||
const yMaxItemsEl = document.getElementById('yMaxItems');
|
||
|
||
if (!xMaxItemsEl || !yMaxItemsEl) {
|
||
showError('无法找到配置元素，请确保数据源配置面板已打开');
|
||
return;
|
||
}
|
||
|
||
const xMaxItems = parseInt(xMaxItemsEl.value) || 30;
|
||
const yMaxItems = parseInt(yMaxItemsEl.value) || 30;
|
||
|
||
// 先清除之前的验证错误
|
||
clearValidationErrors();
|
||
|
||
// 检查必要项是否填写
|
||
if (xCollections.length === 0) {
|
||
const xErrorEl = document.getElementById('xCollectionError');
|
||
if (xErrorEl) xErrorEl.style.display = 'block';
|
||
showError('请至少选择一个横坐标 Collection');
|
||
return;
|
||
}
|
||
if (yCollections.length === 0) {
|
||
const yErrorEl = document.getElementById('yCollectionError');
|
||
if (yErrorEl) yErrorEl.style.display = 'block';
|
||
showError('请至少选择一个纵坐标 Collection');
|
||
return;
|
||
}
|
||
|
||
try {
|
||
// 清空之前的结果
|
||
allSimilarityResults = [];
|
||
currentMatrixIndex = 0;
|
||
|
||
// 计算总的请求数
|
||
const totalRequests = xCollections.length * yCollections.length;
|
||
let completedRequests = 0;
|
||
|
||
showLoading(true, `正在计算相似度矩阵... (0/${totalRequests})`);
|
||
|
||
// 遍历所有X和Y的组合
|
||
for (let i = 0; i < xCollections.length; i++) {
|
||
for (let j = 0; j < yCollections.length; j++) {
|
||
const xCollection = xCollections[i];
|
||
const yCollection = yCollections[j];
|
||
|
||
try {
|
||
// 更新进度
|
||
completedRequests++;
|
||
showLoading(true, `正在计算相似度矩阵... (${completedRequests}/${totalRequests})`);
|
||
|
||
const data = await apiCall('/calculate', {
|
||
method: 'POST',
|
||
body: JSON.stringify({
|
||
x_collection: xCollection,
|
||
y_collection: yCollection,
|
||
x_max_items: xMaxItems,
|
||
y_max_items: yMaxItems
|
||
})
|
||
});
|
||
|
||
// 保存结果，并为每张图创建独立的可视化配置
|
||
const visualConfig = createDefaultVisualConfig(
|
||
data.result.x_available_fields,
|
||
data.result.y_available_fields
|
||
);
|
||
|
||
allSimilarityResults.push({
|
||
xCollection: xCollection,
|
||
yCollection: yCollection,
|
||
result: data.result,
|
||
matrix: data.result.matrix,
|
||
xData: data.result.x_data.slice(0, xMaxItems),
|
||
yData: data.result.y_data.slice(0, yMaxItems),
|
||
xAvailableFields: data.result.x_available_fields,
|
||
yAvailableFields: data.result.y_available_fields,
|
||
stats: data.result.stats,
|
||
visualConfig: visualConfig // 每张图独立的可视化配置
|
||
});
|
||
|
||
} catch (error) {
|
||
// 单个矩阵计算失败,显示警告并继续下一组
|
||
console.warn(`[相似度计算] ${xCollection} vs ${yCollection} 失败:`, error);
|
||
showWarning(`跳过 ${xCollection} vs ${yCollection}: ${error.message}`, 4000);
|
||
// 不添加到结果中,继续下一个
|
||
}
|
||
}
|
||
}
|
||
|
||
if (allSimilarityResults.length === 0) {
|
||
throw new Error('所有相似度计算都失败了');
|
||
}
|
||
|
||
// *** 新架构：初始化按钮状态数组 ***
|
||
initializeButtonStates();
|
||
|
||
// 重置全局UI状态
|
||
globalUIState.dataSource.primaryIndex = null;
|
||
globalUIState.dataSource.subtractIndex = null;
|
||
globalUIState.dataSource.currentMatrix = null;
|
||
globalUIState.filters.activeFilterIndices = [];
|
||
globalUIState.exclusiveMode.active = false;
|
||
globalUIState.exclusiveMode.editingIndex = null;
|
||
|
||
// 隐藏筛选器标签切换（重置时确保是主筛选器标签）
|
||
hideFilterTabs();
|
||
|
||
// *** 新架构：更新图表列表UI ***
|
||
updateMatrixListUI();
|
||
updateExportMatrixSelector();
|
||
|
||
// 显示图表选择控制区域 (添加空值检查)
|
||
const matrixSelectorControl = document.getElementById('matrixSelectorControl');
|
||
if (matrixSelectorControl) {
|
||
matrixSelectorControl.style.display = 'block';
|
||
}
|
||
|
||
// *** 新特性:首次计算相似度时自动启用第一张图的独占模式 ***
|
||
if (allSimilarityResults.length > 0) {
|
||
console.log('[自动独占] 首次计算相似度，自动启用图0的独占模式');
|
||
await enterExclusiveMode(0);
|
||
updateMatrixListUI(); // 再次更新UI以反映独占模式状态
|
||
}
|
||
|
||
showSuccess(`成功计算 ${allSimilarityResults.length} 个相似度矩阵! 已自动启用第一张图的编辑模式`);
|
||
|
||
} catch (error) {
|
||
showError('计算相似度失败: ' + error.message);
|
||
} finally {
|
||
showLoading(false);
|
||
}
|
||
}
|
||
|
||
// =====
|
||
// 可视化更新与渲染
|
||
// =====
|
||
|
||
// 更新Top-K滑块的最大值
|
||
function updateTopkSliderMax() {
|
||
if (!filteredMatrix) return;
|
||
|
||
const maxX = filteredMatrix[0] ? filteredMatrix[0].length : 0;
|
||
const maxY = filteredMatrix.length;
|
||
|
||
// 根据当前选择的轴确定最大值
|
||
const maxTopk = currentTopkAxis === 'x' ? maxX : maxY;
|
||
|
||
const topkSlider = document.getElementById('topkSlider');
|
||
if (!topkSlider) return;
|
||
|
||
topkSlider.max = maxTopk;
|
||
|
||
// 如果当前值超过最大值，重置为最大值
|
||
if (parseInt(topkSlider.value) > maxTopk) {
|
||
topkSlider.value = maxTopk;
|
||
updateTopkDisplay();
|
||
}
|
||
|
||
// 更新增减按钮状态
|
||
updateTopkButtons();
|
||
}
|
||
|
||
// 更新Top-K增减按钮状态
|
||
function updateTopkButtons() {
|
||
// 移除所有禁用逻辑，按钮始终可用
|
||
const decBtn = document.getElementById('topkDecBtn');
|
||
const incBtn = document.getElementById('topkIncBtn');
|
||
|
||
decBtn.disabled = false;
|
||
incBtn.disabled = false;
|
||
}
|
||
|
||
// 调整Top-K值
|
||
function adjustTopk(delta) {
|
||
const topkSlider = document.getElementById('topkSlider');
|
||
const currentValue = parseInt(topkSlider.value);
|
||
const minValue = parseInt(topkSlider.min);
|
||
const maxValue = parseInt(topkSlider.max);
|
||
const newValue = Math.max(minValue, Math.min(maxValue, currentValue + delta));
|
||
if (newValue !== currentValue) {
|
||
topkSlider.value = newValue;
|
||
// 手动触发 input 事件，以确保状态同步和缓存失效
|
||
topkSlider.dispatchEvent(new Event('input'));
|
||
}
|
||
|
||
// 确保按钮状态正确更新
|
||
updateTopkButtons();
|
||
}
|
||
|
||
// 调整最小相似度值
|
||
function adjustMinSimilarity(delta) {
|
||
const minSlider = document.getElementById('minSimilaritySlider');
|
||
const maxSlider = document.getElementById('maxSimilaritySlider');
|
||
const currentValue = parseFloat(minSlider.value);
|
||
const minValue = parseFloat(minSlider.min);
|
||
const maxValue = parseFloat(maxSlider.value);
|
||
const newValue = Math.max(minValue, Math.min(maxValue, currentValue + delta));
|
||
|
||
// 保留两位小数避免浮点精度问题
|
||
const roundedValue = Math.round(newValue * 100) / 100;
|
||
|
||
if (roundedValue !== currentValue) {
|
||
minSlider.value = roundedValue;
|
||
// 手动触发 input 事件，以确保状态同步和缓存失效
|
||
minSlider.dispatchEvent(new Event('input'));
|
||
}
|
||
}
|
||
|
||
// 调整最大相似度值
|
||
function adjustMaxSimilarity(delta) {
|
||
const minSlider = document.getElementById('minSimilaritySlider');
|
||
const maxSlider = document.getElementById('maxSimilaritySlider');
|
||
const currentValue = parseFloat(maxSlider.value);
|
||
const minValue = parseFloat(minSlider.value);
|
||
const maxValue = parseFloat(maxSlider.max);
|
||
const newValue = Math.max(minValue, Math.min(maxValue, currentValue + delta));
|
||
|
||
// 保留两位小数避免浮点精度问题
|
||
const roundedValue = Math.round(newValue * 100) / 100;
|
||
|
||
if (roundedValue !== currentValue) {
|
||
maxSlider.value = roundedValue;
|
||
// 手动触发 input 事件，以确保状态同步和缓存失效
|
||
maxSlider.dispatchEvent(new Event('input'));
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 计算当前应用的最终布尔矩阵遮罩
|
||
* @param {boolean} needTopKAxis - 是否需要返回topKAxis信息(用于统计面板显示缺失匹配)
|
||
* @returns {Object|Array} - 如果needTopKAxis=true返回{finalMask, topKAxis}, 否则只返回finalMask
|
||
*/
|
||
function computeCurrentFinalMask(needTopKAxis = false) {
|
||
if (!filteredMatrix) {
|
||
return needTopKAxis ? { finalMask: null, topKAxis: 'none' } : null;
|
||
}
|
||
|
||
let finalMask = null;
|
||
let topKAxis = 'none';
|
||
|
||
// 情况1: 独占模式
|
||
if (globalUIState.exclusiveMode.active && globalUIState.exclusiveMode.editingIndex !== null) {
|
||
const editingIndex = globalUIState.exclusiveMode.editingIndex;
|
||
const config = allSimilarityResults[editingIndex].visualConfig;
|
||
finalMask = config.cachedMasks?.finalMask || computeFinalMaskForMatrix(editingIndex);
|
||
|
||
if (needTopKAxis) {
|
||
topKAxis = config.filters.topK.value > 0 ? config.filters.topK.axis : 'none';
|
||
}
|
||
}
|
||
// 情况2: 应用筛选器模式
|
||
else if (globalUIState.filters.activeFilterIndices.length > 0) {
|
||
const masks = globalUIState.filters.activeFilterIndices.map(index => {
|
||
const config = allSimilarityResults[index].visualConfig;
|
||
return config.cachedMasks?.finalMask || computeFinalMaskForMatrix(index);
|
||
}).filter(mask => mask !== null);
|
||
|
||
if (masks.length > 0) {
|
||
finalMask = combineWithOR(masks);
|
||
}
|
||
|
||
// 应用临时筛选器 (AND运算)
|
||
const tempFilterMask = computeTemporaryFilterMask();
|
||
if (tempFilterMask) {
|
||
finalMask = finalMask ? combineWithAND(finalMask, tempFilterMask) : tempFilterMask;
|
||
|
||
if (needTopKAxis) {
|
||
topKAxis = globalUIState.temporaryFilter.topK.value > 0
|
||
? globalUIState.temporaryFilter.topK.axis
|
||
: 'none';
|
||
}
|
||
}
|
||
}
|
||
// 情况3: 默认模式
|
||
else {
|
||
const tempFilterMask = computeTemporaryFilterMask();
|
||
if (tempFilterMask) {
|
||
finalMask = tempFilterMask;
|
||
|
||
if (needTopKAxis) {
|
||
topKAxis = globalUIState.temporaryFilter.topK.value > 0
|
||
? globalUIState.temporaryFilter.topK.axis
|
||
: 'none';
|
||
}
|
||
} else {
|
||
const minSim = parseFloat(document.getElementById('minSimilaritySlider')?.value || 0);
|
||
const maxSim = parseFloat(document.getElementById('maxSimilaritySlider')?.value || 1);
|
||
const topK = parseInt(document.getElementById('topkSlider')?.value || 0);
|
||
const axis = currentTopkAxis || 'x';
|
||
|
||
const thresholdMask = computeThresholdMask(filteredMatrix, minSim, maxSim);
|
||
const topKMask = computeTopKMask(filteredMatrix, topK, axis);
|
||
finalMask = combineWithAND(thresholdMask, topKMask);
|
||
|
||
if (needTopKAxis) {
|
||
topKAxis = topK > 0 ? axis : 'none';
|
||
}
|
||
}
|
||
}
|
||
|
||
return needTopKAxis ? { finalMask, topKAxis } : finalMask;
|
||
}
|
||
|
||
// 计算当前显示的对比数 - 新架构：使用布尔矩阵
|
||
function getCurrentDisplayCount() {
|
||
const finalMask = computeCurrentFinalMask(false);
|
||
|
||
if (!finalMask) return 0;
|
||
|
||
// 统计true的数量
|
||
let count = 0;
|
||
finalMask.forEach(row => {
|
||
row.forEach(val => {
|
||
if (val === true) {
|
||
count++;
|
||
}
|
||
});
|
||
});
|
||
return count;
|
||
}
|
||
|
||
// 更新热力图（实时响应控制变化）- 新架构：使用布尔矩阵
|
||
// zOnly: 为true时只更新z矩阵（用于筛选器变化），false时更新全部（用于显示字段切换等）
|
||
function updateHeatmap(zOnly = true) {
|
||
const startTime = performance.now();
|
||
if (!filteredMatrix) {
|
||
return;
|
||
}
|
||
|
||
console.log('[updateHeatmap] 开始更新 - 使用新布尔矩阵架构' + (zOnly ? ' (zOnly模式)' : ' (完整模式)'));
|
||
|
||
// 保存当前的缩放和选中状态
|
||
let currentLayout = null;
|
||
const heatmapDiv = document.getElementById('heatmap');
|
||
if (heatmapDiv && heatmapDiv.layout) {
|
||
currentLayout = {
|
||
xaxis: {
|
||
range: heatmapDiv.layout.xaxis.range,
|
||
autorange: heatmapDiv.layout.xaxis.autorange
|
||
},
|
||
yaxis: {
|
||
range: heatmapDiv.layout.yaxis.range,
|
||
autorange: heatmapDiv.layout.yaxis.autorange
|
||
}
|
||
};
|
||
}
|
||
|
||
// =====
|
||
// 新架构核心逻辑 - 使用公共函数计算最终遮罩
|
||
// =====
|
||
|
||
// 添加日志以保持调试能力
|
||
if (globalUIState.exclusiveMode.active && globalUIState.exclusiveMode.editingIndex !== null) {
|
||
console.log(`[updateHeatmap] 独占模式 - 使用图 ${globalUIState.exclusiveMode.editingIndex} 的遮罩`);
|
||
} else if (globalUIState.filters.activeFilterIndices.length > 0) {
|
||
console.log(`[updateHeatmap] 应用筛选器模式 - 合并 ${globalUIState.filters.activeFilterIndices.length} 个图的遮罩`);
|
||
} else {
|
||
console.log('[updateHeatmap] 默认模式 - 使用临时筛选器');
|
||
}
|
||
|
||
// 使用公共函数计算最终遮罩
|
||
const finalMask = computeCurrentFinalMask(false);
|
||
|
||
// 应用遮罩到原始数据
|
||
let displayMatrix = filteredMatrix;
|
||
if (finalMask) {
|
||
displayMatrix = applyMask(filteredMatrix, finalMask);
|
||
}
|
||
|
||
let displayXLabels = [...currentXLabels];
|
||
let displayYLabels = [...currentYLabels];
|
||
// 更新热力图数据，但保持当前的缩放状态
|
||
updateHeatmapData(displayMatrix, displayXLabels, displayYLabels, currentLayout, zOnly);
|
||
|
||
// 更新统计信息中的当前显示对比数
|
||
updateCurrentDisplayStat();
|
||
|
||
const elapsed = performance.now() - startTime;
|
||
console.log(`[DEBUG] updateHeatmap 总耗时: ${(elapsed / 1000).toFixed(3)}s`);
|
||
|
||
// zOnly模式时，更新动态防抖延迟
|
||
if (zOnly) {
|
||
dynamicDebounceDelay = Math.max(MIN_DEBOUNCE_DELAY, Math.ceil(elapsed));
|
||
dynamicDebounceDelay = Math.min(MAX_DEBOUNCE_DELAY, Math.ceil(elapsed));
|
||
console.log(`[DEBUG] 动态防抖延迟更新为: ${dynamicDebounceDelay}ms`);
|
||
}
|
||
}
|
||
|
||
// 更新热力图数据但保持缩放状态
|
||
// zOnly: 为true时只更新z矩阵（用于筛选器变化），性能更好
|
||
function updateHeatmapData(matrix, xLabels, yLabels, preserveLayout = null, zOnly = true) {
|
||
const startTime = performance.now();
|
||
let stepTime = performance.now();
|
||
|
||
if (preserveLayout && zOnly) {
|
||
// 快速模式：只更新z矩阵数据
|
||
Plotly.restyle('heatmap', {
|
||
z: [matrix]
|
||
});
|
||
console.log(`[DEBUG] updateHeatmapData - Plotly.restyle(zOnly) 耗时: ${((performance.now() - stepTime) / 1000).toFixed(3)}s`);
|
||
console.log(`[DEBUG] updateHeatmapData 总耗时: ${((performance.now() - startTime) / 1000).toFixed(3)}s`);
|
||
return;
|
||
}
|
||
|
||
// 获取当前模式的相似度范围
|
||
const range = getCurrentSimilarityRange();
|
||
|
||
// 获取显示字段用于坐标轴标题
|
||
const xDisplayField = globalUIState.displayFields.xField || 'order_id';
|
||
const yDisplayField = globalUIState.displayFields.yField || 'order_id';
|
||
|
||
// 更新全局完整标签（供 hover 事件使用）
|
||
window._heatmapFullLabels = {
|
||
x: generateFullLabels(currentXData, xDisplayField),
|
||
y: generateFullLabels(currentYData, yDisplayField)
|
||
};
|
||
|
||
if (preserveLayout) {
|
||
// 使用 Plotly.restyle 只更新数据，不影响布局
|
||
Plotly.restyle('heatmap', {
|
||
z: [matrix],
|
||
x: [xLabels], // 使用截断标签
|
||
y: [yLabels], // 使用截断标签
|
||
colorscale: [colorSchemes[currentColorScheme]],
|
||
zmin: [range.min],
|
||
zmax: [range.max]
|
||
});
|
||
console.log(`[DEBUG] updateHeatmapData - Plotly.restyle(full) 耗时: ${((performance.now() - stepTime) / 1000).toFixed(3)}s`);
|
||
stepTime = performance.now();
|
||
|
||
// 更新坐标轴标题（动态生成）
|
||
// 使用主数据源的 collection 名称
|
||
const primaryIndex = globalUIState.dataSource.primaryIndex;
|
||
const matrixData = (primaryIndex !== null) ? allSimilarityResults[primaryIndex] : null;
|
||
const xCollectionName = matrixData ? matrixData.xCollection : '';
|
||
const yCollectionName = matrixData ? matrixData.yCollection : '';
|
||
const xFieldName = xDisplayField === 'order_id' ? '顺序ID' : xDisplayField;
|
||
const yFieldName = yDisplayField === 'order_id' ? '顺序ID' : yDisplayField;
|
||
|
||
// 如果需要恢复特定的缩放范围，使用 relayout
|
||
const layoutUpdate = {
|
||
'xaxis.title': `${xCollectionName} (${xFieldName})`,
|
||
'yaxis.title': `${yCollectionName} (${yFieldName})`,
|
||
'xaxis.type': 'category', // 强制保持分类类型
|
||
'yaxis.type': 'category' // 强制保持分类类型
|
||
};
|
||
|
||
if (preserveLayout.xaxis.range) {
|
||
layoutUpdate['xaxis.range'] = preserveLayout.xaxis.range;
|
||
layoutUpdate['xaxis.autorange'] = false;
|
||
}
|
||
|
||
if (preserveLayout.yaxis.range) {
|
||
layoutUpdate['yaxis.range'] = preserveLayout.yaxis.range;
|
||
layoutUpdate['yaxis.autorange'] = false;
|
||
}
|
||
|
||
Plotly.relayout('heatmap', layoutUpdate);
|
||
console.log(`[DEBUG] updateHeatmapData - Plotly.relayout 耗时: ${((performance.now() - stepTime) / 1000).toFixed(3)}s`);
|
||
} else {
|
||
// 如果没有保存的布局状态，使用完整的重新绘制
|
||
createHeatmap(matrix, xLabels, yLabels);
|
||
console.log(`[DEBUG] updateHeatmapData - createHeatmap 耗时: ${((performance.now() - stepTime) / 1000).toFixed(3)}s`);
|
||
}
|
||
console.log(`[DEBUG] updateHeatmapData 总耗时: ${((performance.now() - startTime) / 1000).toFixed(3)}s`);
|
||
}
|
||
|
||
// 更新当前显示对比数统计
|
||
function updateCurrentDisplayStat() {
|
||
const currentDisplayElement = document.getElementById('currentDisplayCount');
|
||
if (currentDisplayElement) {
|
||
const currentCount = getCurrentDisplayCount();
|
||
|
||
// 获取总对比数
|
||
let totalCount = 0;
|
||
if (filteredMatrix && filteredMatrix.length > 0) {
|
||
totalCount = filteredMatrix.length * filteredMatrix[0].length;
|
||
} else if (globalUIState.dataSource.currentMatrix && globalUIState.dataSource.currentMatrix.length > 0) {
|
||
totalCount = globalUIState.dataSource.currentMatrix.length * globalUIState.dataSource.currentMatrix[0].length;
|
||
}
|
||
|
||
// 统一格式: 当前/总数
|
||
currentDisplayElement.textContent = `${currentCount} / ${totalCount}`;
|
||
}
|
||
}
|
||
|
||
|
||
// 获取当前模式下的相似度范围
|
||
function getCurrentSimilarityRange() {
|
||
return isInDifferenceMode() ? { min: -1, max: 1 } : { min: 0, max: 1 };
|
||
}
|
||
|
||
|
||
// 创建热力图
|
||
function createHeatmap(matrix = filteredMatrix, xLabels = currentXLabels, yLabels = currentYLabels) {
|
||
if (!matrix) {
|
||
showError('没有相似度数据');
|
||
return;
|
||
}
|
||
|
||
// 获取当前模式的相似度范围
|
||
const range = getCurrentSimilarityRange();
|
||
|
||
// 生成完整标签数组（一维），存入全局变量供 hover 事件使用
|
||
const xDisplayField = globalUIState.displayFields.xField || 'order_id';
|
||
const yDisplayField = globalUIState.displayFields.yField || 'order_id';
|
||
window._heatmapFullLabels = {
|
||
x: generateFullLabels(currentXData, xDisplayField),
|
||
y: generateFullLabels(currentYData, yDisplayField)
|
||
};
|
||
|
||
const trace = {
|
||
z: matrix,
|
||
x: xLabels, // 使用截断标签，保持坐标轴自动合并
|
||
y: yLabels, // 使用截断标签，保持坐标轴自动合并
|
||
type: 'heatmap',
|
||
colorscale: colorSchemes[currentColorScheme],
|
||
hoverongaps: false,
|
||
hoverinfo: 'none', // 禁用默认 hover，使用自定义
|
||
colorbar: {
|
||
title: isInDifferenceMode() ? '差值' : '相似度',
|
||
titleside: 'right',
|
||
tickmode: 'linear',
|
||
tick0: range.min,
|
||
dtick: isInDifferenceMode() ? 0.2 : 0.1
|
||
},
|
||
showscale: true,
|
||
zmin: range.min, // 固定最小值
|
||
zmax: range.max // 固定最大值
|
||
};
|
||
|
||
// 获取容器实际尺寸
|
||
const container = document.querySelector('.heatmap-container');
|
||
const containerRect = container.getBoundingClientRect();
|
||
|
||
// 计算可用空间（减去padding和controls的高度）
|
||
const availableWidth = containerRect.width;
|
||
const availableHeight = containerRect.height;
|
||
|
||
// 动态生成坐标轴标题
|
||
// 使用主数据源的 collection 名称
|
||
const primaryIndex = globalUIState.dataSource.primaryIndex;
|
||
const matrixData = (primaryIndex !== null) ? allSimilarityResults[primaryIndex] : null;
|
||
const xCollectionName = matrixData ? matrixData.xCollection : '';
|
||
const yCollectionName = matrixData ? matrixData.yCollection : '';
|
||
|
||
// 注意：xDisplayField 和 yDisplayField 已在函数开头声明，这里直接使用
|
||
const xFieldName = xDisplayField === 'order_id' ? '顺序ID' : xDisplayField;
|
||
const yFieldName = yDisplayField === 'order_id' ? '顺序ID' : yDisplayField;
|
||
|
||
const layout = {
|
||
title: {
|
||
text: '相似度热力图',
|
||
font: { size: 14, color: '#404040' },
|
||
x: 0.5
|
||
},
|
||
xaxis: {
|
||
title: `${xCollectionName} (${xFieldName})`,
|
||
tickangle: -45,
|
||
side: 'bottom',
|
||
tickfont: { size: 9 },
|
||
titlefont: { color: '#404040' },
|
||
type: 'category' // 强制使用分类类型，防止Plotly将数字开头的标签误识别为数值/日期
|
||
},
|
||
yaxis: {
|
||
title: `${yCollectionName} (${yFieldName})`,
|
||
autorange: 'reversed',
|
||
tickfont: { size: 9 },
|
||
titlefont: { color: '#404040' },
|
||
type: 'category' // 强制使用分类类型，防止Plotly将数字开头的标签误识别为数值/日期
|
||
},
|
||
hoverlabel: {
|
||
bgcolor: 'rgba(255, 255, 255, 0.2)', // 白色背景,透明度90%
|
||
bordercolor: '#404040',
|
||
font: {
|
||
size: 12,
|
||
color: '#404040'
|
||
}
|
||
},
|
||
margin: { l: 70, r: 50, t: 50, b: 80 },
|
||
width: availableWidth,
|
||
height: availableHeight,
|
||
autosize: false,
|
||
plot_bgcolor: 'white',
|
||
paper_bgcolor: 'white'
|
||
};
|
||
|
||
const config = {
|
||
responsive: false, // 改为false，使用手动控制尺寸
|
||
displayModeBar: true,
|
||
modeBarButtonsToRemove: ['pan2d', 'lasso2d', 'select2d'],
|
||
displaylogo: false,
|
||
scrollZoom: true
|
||
};
|
||
|
||
// 调试：详细检查所有labels
|
||
console.log('[DEBUG] createHeatmap - Total labels:', xLabels.length, 'x', yLabels.length);
|
||
|
||
let invalidXLabels = [];
|
||
xLabels.forEach((label, i) => {
|
||
if (label === undefined || label === null || (typeof label === 'number' && isNaN(label)) || label === 'NaN') {
|
||
invalidXLabels.push({ index: i, value: label, type: typeof label });
|
||
}
|
||
});
|
||
|
||
let invalidYLabels = [];
|
||
yLabels.forEach((label, i) => {
|
||
if (label === undefined || label === null || (typeof label === 'number' && isNaN(label)) || label === 'NaN') {
|
||
invalidYLabels.push({ index: i, value: label, type: typeof label });
|
||
}
|
||
});
|
||
|
||
if (invalidXLabels.length > 0) {
|
||
console.error('[ERROR] Found', invalidXLabels.length, 'invalid xLabels:', invalidXLabels);
|
||
}
|
||
if (invalidYLabels.length > 0) {
|
||
console.error('[ERROR] Found', invalidYLabels.length, 'invalid yLabels:', invalidYLabels);
|
||
}
|
||
|
||
console.log('[DEBUG] xLabels sample (first 5):', xLabels.slice(0, 5));
|
||
console.log('[DEBUG] xLabels sample (last 5):', xLabels.slice(-5));
|
||
console.log('[DEBUG] yLabels sample (first 5):', yLabels.slice(0, 5));
|
||
console.log('[DEBUG] yLabels sample (last 5):', yLabels.slice(-5));
|
||
|
||
// 特别检查570-580范围
|
||
if (xLabels.length > 575) {
|
||
console.log('[DEBUG] xLabels[570-580]:', xLabels.slice(570, 581));
|
||
}
|
||
if (yLabels.length > 575) {
|
||
console.log('[DEBUG] yLabels[570-580]:', yLabels.slice(570, 581));
|
||
}
|
||
|
||
console.log('[DEBUG] xaxis type:', layout.xaxis.type);
|
||
console.log('[DEBUG] yaxis type:', layout.yaxis.type);
|
||
|
||
// 使用 Plotly.newPlot 重新创建图表
|
||
Plotly.newPlot('heatmap', [trace], layout, config);
|
||
|
||
// 创建或获取自定义 tooltip 元素
|
||
let customTooltip = document.getElementById('heatmap-custom-tooltip');
|
||
if (!customTooltip) {
|
||
customTooltip = document.createElement('div');
|
||
customTooltip.id = 'heatmap-custom-tooltip';
|
||
customTooltip.style.cssText = `
|
||
position: fixed;
|
||
background: rgba(255, 255, 255, 0.95);
|
||
border: 1px solid #404040;
|
||
border-radius: 4px;
|
||
padding: 8px 12px;
|
||
font-size: 12px;
|
||
color: #404040;
|
||
pointer-events: none;
|
||
z-index: 10000;
|
||
max-width: 400px;
|
||
word-wrap: break-word;
|
||
display: none;
|
||
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
|
||
`;
|
||
document.body.appendChild(customTooltip);
|
||
}
|
||
|
||
// 添加自定义 hover 事件处理
|
||
const heatmapDiv = document.getElementById('heatmap');
|
||
heatmapDiv.on('plotly_hover', function(data) {
|
||
const pt = data.points[0];
|
||
const xIdx = pt.pointNumber[1]; // 列索引
|
||
const yIdx = pt.pointNumber[0]; // 行索引
|
||
const fullLabels = window._heatmapFullLabels;
|
||
const xText = fullLabels?.x?.[xIdx] || pt.x;
|
||
const yText = fullLabels?.y?.[yIdx] || pt.y;
|
||
const similarity = pt.z?.toFixed(4) || 'N/A';
|
||
|
||
customTooltip.innerHTML = `<b>Y:</b> ${yText}<br><b>X:</b> ${xText}<br><b>相似度:</b> ${similarity}`;
|
||
customTooltip.style.display = 'block';
|
||
|
||
// 定位 tooltip
|
||
const rect = heatmapDiv.getBoundingClientRect();
|
||
customTooltip.style.left = (data.event.clientX + 15) + 'px';
|
||
customTooltip.style.top = (data.event.clientY + 15) + 'px';
|
||
});
|
||
|
||
heatmapDiv.on('plotly_unhover', function() {
|
||
customTooltip.style.display = 'none';
|
||
});
|
||
}
|
||
|
||
// 调整热力图大小以适应容器变化
|
||
function resizeHeatmap() {
|
||
const heatmapDiv = document.getElementById('heatmap');
|
||
if (!heatmapDiv || !heatmapDiv.data) {
|
||
return;
|
||
}
|
||
|
||
// 使用requestAnimationFrame确保在下一次重绘前执行
|
||
requestAnimationFrame(() => {
|
||
// 获取heatmap-container的实际尺寸
|
||
const container = document.querySelector('.heatmap-container');
|
||
if (!container) return;
|
||
|
||
const containerRect = container.getBoundingClientRect();
|
||
|
||
// 计算可用空间（减去padding和controls的高度）
|
||
const availableWidth = containerRect.width;
|
||
document.querySelector('.heatmap-controls');
|
||
const availableHeight = containerRect.height;
|
||
|
||
console.log(`[热力图Resize] 容器尺寸: ${containerRect.width}x${containerRect.height}, 可用尺寸: ${availableWidth}x${availableHeight}`);
|
||
|
||
// 使用update强制更新图表尺寸(同时更新data和layout,解决缩小时不生效的问题)
|
||
Plotly.update(heatmapDiv, {}, {
|
||
width: availableWidth,
|
||
height: availableHeight
|
||
}).catch(err => {
|
||
console.warn('[热力图Resize] update失败', err);
|
||
});
|
||
});
|
||
}
|
||
|
||
/**
|
||
* 计算非差值模式下的统计信息
|
||
* @param {Array<Array<boolean>>} booleanMask - 当前作用于画面的布尔矩阵
|
||
* @param {string} topKAxis - Top-K轴向 ('x' 或 'y' 或 'none')
|
||
* @returns {Object} - 统计信息对象
|
||
*/
|
||
function calculateNormalModeStatistics(booleanMask, topKAxis = 'none') {
|
||
if (!booleanMask || booleanMask.length === 0) {
|
||
return {
|
||
totalCount: 0,
|
||
currentDisplayCount: 0,
|
||
diagonalTrueCount: 0,
|
||
diagonalTotalCount: 0,
|
||
missingMatchCount: 0
|
||
};
|
||
}
|
||
|
||
const rows = booleanMask.length;
|
||
const cols = booleanMask[0].length;
|
||
|
||
// 1. 统计布尔矩阵中true的总数
|
||
let totalTrueCount = 0;
|
||
for (let i = 0; i < rows; i++) {
|
||
for (let j = 0; j < cols; j++) {
|
||
if (booleanMask[i][j]) {
|
||
totalTrueCount++;
|
||
}
|
||
}
|
||
}
|
||
|
||
// 2. 统计斜对角线上的true数量 (左上到右下的对角线)
|
||
let diagonalTrueCount = 0;
|
||
const diagonalTotalCount = Math.min(rows, cols); // 斜对角线总格数
|
||
for (let i = 0; i < diagonalTotalCount; i++) {
|
||
if (booleanMask[i][i]) {
|
||
diagonalTrueCount++;
|
||
}
|
||
}
|
||
|
||
// 3. 统计缺失匹配数量
|
||
let missingMatchCount = 0;
|
||
if (topKAxis === 'x') {
|
||
// 横轴Top-K: 统计有几行全是false
|
||
for (let i = 0; i < rows; i++) {
|
||
let hasTrue = false;
|
||
for (let j = 0; j < cols; j++) {
|
||
if (booleanMask[i][j]) {
|
||
hasTrue = true;
|
||
break;
|
||
}
|
||
}
|
||
if (!hasTrue) {
|
||
missingMatchCount++;
|
||
}
|
||
}
|
||
} else if (topKAxis === 'y') {
|
||
// 纵轴Top-K: 统计有几列全是false
|
||
for (let j = 0; j < cols; j++) {
|
||
let hasTrue = false;
|
||
for (let i = 0; i < rows; i++) {
|
||
if (booleanMask[i][j]) {
|
||
hasTrue = true;
|
||
break;
|
||
}
|
||
}
|
||
if (!hasTrue) {
|
||
missingMatchCount++;
|
||
}
|
||
}
|
||
}
|
||
|
||
const totalCount = rows * cols;
|
||
|
||
return {
|
||
totalCount: totalCount,
|
||
currentDisplayCount: totalTrueCount,
|
||
diagonalTrueCount: diagonalTrueCount,
|
||
diagonalTotalCount: diagonalTotalCount,
|
||
missingMatchCount: missingMatchCount
|
||
};
|
||
}
|
||
|
||
/**
|
||
* 计算差值模式下的统计信息
|
||
* @param {Array<Array<boolean>>} groundTruthMask - 被减数图的布尔矩阵(ground truth)
|
||
* @param {Array<Array<boolean>>} currentMask - 当前作用于画面的布尔矩阵
|
||
* @returns {Object} - 统计信息对象
|
||
*/
|
||
function calculateDifferenceModeStatistics(groundTruthMask, currentMask) {
|
||
if (!groundTruthMask || !currentMask ||
|
||
groundTruthMask.length === 0 || currentMask.length === 0) {
|
||
return {
|
||
truePositive: 0,
|
||
trueNegative: 0,
|
||
falsePositive: 0,
|
||
falseNegative: 0,
|
||
contextRecall: 0,
|
||
contextPrecision: 0
|
||
};
|
||
}
|
||
|
||
const rows = groundTruthMask.length;
|
||
const cols = groundTruthMask[0].length;
|
||
|
||
let truePositive = 0; // ground_truth为1, 当前数据为1
|
||
let trueNegative = 0; // ground_truth为0, 当前数据为0
|
||
let falsePositive = 0; // ground_truth为0, 当前数据为1
|
||
let falseNegative = 0; // ground_truth为1, 当前数据为0
|
||
|
||
for (let i = 0; i < rows; i++) {
|
||
for (let j = 0; j < cols; j++) {
|
||
const gtValue = groundTruthMask[i][j];
|
||
const currentValue = currentMask[i][j];
|
||
|
||
if (gtValue && currentValue) {
|
||
truePositive++;
|
||
} else if (!gtValue && !currentValue) {
|
||
trueNegative++;
|
||
} else if (!gtValue && currentValue) {
|
||
falsePositive++;
|
||
} else if (gtValue && !currentValue) {
|
||
falseNegative++;
|
||
}
|
||
}
|
||
}
|
||
|
||
// 计算上下文召回率 = TP / (TP + FN)
|
||
const contextRecall = (truePositive + falseNegative) > 0
|
||
? truePositive / (truePositive + falseNegative)
|
||
: 0;
|
||
|
||
// 计算上下文精度 = TP / (TP + FP)
|
||
const contextPrecision = (truePositive + falsePositive) > 0
|
||
? truePositive / (truePositive + falsePositive)
|
||
: 0;
|
||
|
||
return {
|
||
truePositive: truePositive,
|
||
trueNegative: trueNegative,
|
||
falsePositive: falsePositive,
|
||
falseNegative: falseNegative,
|
||
contextRecall: contextRecall,
|
||
contextPrecision: contextPrecision
|
||
};
|
||
}
|
||
|
||
// 显示统计信息
|
||
function showStatistics(activatePanel = true) {
|
||
const statsGrid = document.getElementById('statsGrid');
|
||
|
||
if (!statsGrid) {
|
||
console.warn('statsGrid元素不存在，统计信息面板可能未加载');
|
||
return;
|
||
}
|
||
|
||
// 使用公共函数获取当前应用的最终布尔矩阵和topKAxis
|
||
const { finalMask, topKAxis } = computeCurrentFinalMask(true);
|
||
|
||
if (!finalMask) {
|
||
statsGrid.innerHTML = '<div style="padding: 10px; text-align: center; color: #999;">暂无统计数据</div>';
|
||
return;
|
||
}
|
||
|
||
// 计算统计信息
|
||
const stats = calculateNormalModeStatistics(finalMask, topKAxis);
|
||
|
||
// 构建HTML
|
||
let statsHTML = '';
|
||
|
||
// 1. 当前显示对比数/总对比数
|
||
statsHTML += `
|
||
<div class="stat-item">
|
||
<div class="icon"><i class="bi bi-eyeglasses"></i></div>
|
||
<div class="label">当前显示对比数</div>
|
||
<div class="value" id="currentDisplayCount">${stats.currentDisplayCount} / ${stats.totalCount}</div>
|
||
</div>
|
||
`;
|
||
|
||
// 2. 斜对角线上对比数/斜对角线总格数
|
||
statsHTML += `
|
||
<div class="stat-item">
|
||
<div class="icon"><i class="bi bi-shadows"></i></div>
|
||
<div class="label">斜对角线对比数</div>
|
||
<div class="value">${stats.diagonalTrueCount} / ${stats.diagonalTotalCount}</div>
|
||
</div>
|
||
`;
|
||
|
||
// 3. 缺失匹配 (仅在激活Top-K时显示)
|
||
if (topKAxis === 'x' || topKAxis === 'y') {
|
||
const axisLabel = topKAxis === 'x' ? '横轴' : '纵轴';
|
||
statsHTML += `
|
||
<div class="stat-item">
|
||
<div class="icon"><i class="bi bi-exclamation-triangle-fill"></i></div>
|
||
<div class="label">缺失匹配(${axisLabel})</div>
|
||
<div class="value">${stats.missingMatchCount}</div>
|
||
</div>
|
||
`;
|
||
}
|
||
|
||
statsGrid.innerHTML = statsHTML;
|
||
|
||
if (activatePanel) {
|
||
// 激活统计信息按钮（使用新架构）
|
||
const statisticsBtn = document.querySelector('[data-side="right"][data-position="top"][data-panel="statistics"]');
|
||
if (statisticsBtn && !statisticsBtn.classList.contains('active')) {
|
||
// 取消同位置其他按钮的激活状态
|
||
if (activeButtons.right.top && activeButtons.right.top !== statisticsBtn) {
|
||
activeButtons.right.top.classList.remove('active');
|
||
}
|
||
statisticsBtn.classList.add('active');
|
||
activeButtons.right.top = statisticsBtn;
|
||
|
||
// 关键：调用 updateSidebarContent 来移动面板
|
||
updateSidebarContent('right', 'top', 'statistics');
|
||
}
|
||
|
||
// 激活筛选器控制按钮（使用新架构）
|
||
const filtersBtn = document.querySelector('[data-side="right"][data-position="bottom"][data-panel="filters"]');
|
||
if (filtersBtn && !filtersBtn.classList.contains('active')) {
|
||
// 取消同位置其他按钮的激活状态
|
||
if (activeButtons.right.bottom && activeButtons.right.bottom !== filtersBtn) {
|
||
activeButtons.right.bottom.classList.remove('active');
|
||
}
|
||
filtersBtn.classList.add('active');
|
||
activeButtons.right.bottom = filtersBtn;
|
||
|
||
// 关键：调用 updateSidebarContent 来移动面板
|
||
updateSidebarContent('right', 'bottom', 'filters');
|
||
}
|
||
|
||
// 更新右侧边栏状态（打开侧边栏）
|
||
updateSidebarState('right');
|
||
}
|
||
}
|
||
|
||
// =====
|
||
// UI控件初始化
|
||
// =====
|
||
|
||
// 计算上色条的位置和宽度(考虑thumb宽度)
|
||
function calculateTrackPosition(minValue, maxValue, minSlider) {
|
||
const sliderMin = parseFloat(minSlider.min);
|
||
const sliderMax = parseFloat(minSlider.max);
|
||
const sliderWidth = minSlider.offsetWidth;
|
||
const thumbWidth = 16; // 滑块宽度
|
||
const thumbRadius = thumbWidth / 2;
|
||
|
||
// 如果元素还没有渲染(offsetWidth为0),返回默认值
|
||
if (sliderWidth === 0) {
|
||
console.warn('Slider width is 0, element not yet rendered');
|
||
return {
|
||
left: 0,
|
||
width: 0
|
||
};
|
||
}
|
||
|
||
// 计算值的百分比
|
||
const percent1 = (minValue - sliderMin) / (sliderMax - sliderMin);
|
||
const percent2 = (maxValue - sliderMin) / (sliderMax - sliderMin);
|
||
|
||
// 计算thumb中心点的实际像素位置
|
||
const availableWidth = sliderWidth - thumbWidth * 2;
|
||
const leftPos = thumbRadius + availableWidth * percent1;
|
||
const rightPos = thumbRadius + availableWidth * percent2;
|
||
|
||
return {
|
||
left: leftPos + 2,
|
||
width: rightPos - leftPos
|
||
};
|
||
}
|
||
|
||
// 初始化双滑块
|
||
function initRangeSlider() {
|
||
const minSlider = document.getElementById('minSimilaritySlider');
|
||
const maxSlider = document.getElementById('maxSimilaritySlider');
|
||
const minInput = document.getElementById('minSimilarityInput');
|
||
const maxInput = document.getElementById('maxSimilarityInput');
|
||
const track = document.getElementById('similarityTrack');
|
||
|
||
// 如果任何必需元素不存在,退出初始化
|
||
if (!minSlider || !maxSlider || !minInput || !maxInput || !track) {
|
||
console.warn('Range slider elements not found, skipping initialization');
|
||
return;
|
||
}
|
||
|
||
function updateTrack() {
|
||
const min = parseFloat(minSlider.value);
|
||
const max = parseFloat(maxSlider.value);
|
||
|
||
// 使用辅助函数计算上色条位置
|
||
const pos = calculateTrackPosition(min, max, minSlider);
|
||
track.style.left = pos.left + 'px';
|
||
track.style.width = pos.width + 'px';
|
||
|
||
minInput.value = min;
|
||
maxInput.value = max;
|
||
|
||
// 更新全局筛选器状态
|
||
globalUIState.filters.uiState.similarityRange.min = min;
|
||
globalUIState.filters.uiState.similarityRange.max = max;
|
||
|
||
// *** 根据当前标签页决定保存位置 ***
|
||
if (globalUIState.filterTab.activeTab === 'subtract' && globalUIState.dataSource.subtractIndex !== null) {
|
||
// 减数图筛选器标签：保存到减数图的visualConfig
|
||
const subtractIndex = globalUIState.dataSource.subtractIndex;
|
||
const config = allSimilarityResults[subtractIndex].visualConfig;
|
||
config.similarityRange.min = min;
|
||
config.similarityRange.max = max;
|
||
|
||
// 标记布尔矩阵缓存失效
|
||
if (config.cachedMasks) {
|
||
config.cachedMasks.thresholdMask = null;
|
||
config.cachedMasks.finalMask = null;
|
||
}
|
||
|
||
console.log(`[减数图筛选器] 保存阈值范围: ${min.toFixed(2)} - ${max.toFixed(2)}，缓存已失效`);
|
||
} else if (globalUIState.exclusiveMode.active && globalUIState.exclusiveMode.editingIndex !== null) {
|
||
// 独占模式：保存到编辑中的图表配置
|
||
const config = allSimilarityResults[globalUIState.exclusiveMode.editingIndex].visualConfig;
|
||
config.similarityRange.min = min;
|
||
config.similarityRange.max = max;
|
||
|
||
// 标记布尔矩阵缓存失效
|
||
if (config.cachedMasks) {
|
||
config.cachedMasks.thresholdMask = null;
|
||
config.cachedMasks.finalMask = null;
|
||
}
|
||
|
||
console.log(`[独占模式] 保存阈值范围: ${min.toFixed(2)} - ${max.toFixed(2)}，缓存已失效`);
|
||
} else {
|
||
// *** 非独占模式：更新临时筛选器 ***
|
||
globalUIState.temporaryFilter.enabled = true;
|
||
globalUIState.temporaryFilter.similarityRange.min = min;
|
||
globalUIState.temporaryFilter.similarityRange.max = max;
|
||
console.log(`[临时筛选器] 更新阈值范围: ${min.toFixed(2)} - ${max.toFixed(2)}`);
|
||
}
|
||
|
||
// 防抖: 延迟100ms更新热力图和统计信息
|
||
clearTimeout(heatmapUpdateTimer);
|
||
heatmapUpdateTimer = setTimeout(() => {
|
||
if (filteredMatrix || globalUIState.dataSource.currentMatrix) {
|
||
updateHeatmap();
|
||
|
||
// 统计信息也使用防抖,在热力图更新后执行
|
||
clearTimeout(statsUpdateTimer);
|
||
statsUpdateTimer = setTimeout(() => {
|
||
if (globalUIState.dataSource.subtractIndex !== null) {
|
||
showDifferenceStatistics(false);
|
||
} else {
|
||
showStatistics(false);
|
||
}
|
||
}, 50);
|
||
}
|
||
}, dynamicDebounceDelay);
|
||
}
|
||
|
||
minSlider.addEventListener('input', function () {
|
||
if (parseFloat(this.value) > parseFloat(maxSlider.value)) {
|
||
this.value = maxSlider.value;
|
||
}
|
||
updateTrack();
|
||
});
|
||
|
||
maxSlider.addEventListener('input', function () {
|
||
if (parseFloat(this.value) < parseFloat(minSlider.value)) {
|
||
this.value = minSlider.value;
|
||
}
|
||
updateTrack();
|
||
});
|
||
|
||
minInput.addEventListener('change', function () {
|
||
// 修复：使用 ?? 而非 ||，避免将 0 当作 falsy 值
|
||
const inputValue = parseFloat(this.value);
|
||
const defaultValue = parseFloat(minSlider.min);
|
||
minSlider.value = Math.max(parseFloat(minSlider.min), Math.min(parseFloat(minSlider.max), isNaN(inputValue) ? defaultValue : inputValue));
|
||
updateTrack();
|
||
});
|
||
|
||
maxInput.addEventListener('change', function () {
|
||
// 修复：使用 ?? 而非 ||，避免将 0 当作 falsy 值
|
||
const inputValue = parseFloat(this.value);
|
||
const defaultValue = parseFloat(maxSlider.max);
|
||
maxSlider.value = Math.max(parseFloat(minSlider.min), Math.min(parseFloat(maxSlider.max), isNaN(inputValue) ? defaultValue : inputValue));
|
||
updateTrack();
|
||
});
|
||
|
||
// 初始更新
|
||
updateTrack();
|
||
|
||
// 延迟更新,确保元素完全渲染后重新计算
|
||
setTimeout(() => {
|
||
if (minSlider.offsetWidth > 0) {
|
||
updateTrack();
|
||
}
|
||
}, 100);
|
||
|
||
// 暴露updateTrack到全局,以便在侧边栏打开时调用
|
||
window.updateSimilarityTrack = updateTrack;
|
||
}
|
||
|
||
// 初始化Top-K滑块
|
||
function initTopkSlider() {
|
||
const topkSlider = document.getElementById('topkSlider');
|
||
const topkValue = document.getElementById('topkValue');
|
||
const topkStatus = document.getElementById('topkStatus');
|
||
|
||
// 如果必需元素不存在,退出初始化
|
||
if (!topkSlider || !topkValue || !topkStatus) {
|
||
console.warn('Top-K slider elements not found, skipping initialization');
|
||
return;
|
||
}
|
||
|
||
function updateTopkDisplayInternal() {
|
||
const topkSlider = document.getElementById('topkSlider');
|
||
const topkValueEl = document.getElementById('topkValue');
|
||
const topkStatusEl = document.getElementById('topkStatus');
|
||
|
||
if (!topkSlider || !topkValueEl || !topkStatusEl) return;
|
||
|
||
const topkVal = parseInt(topkSlider.value);
|
||
topkValueEl.textContent = topkVal;
|
||
topkStatusEl.textContent = topkVal === 0 ? '显示全部' : `显示Top-${topkVal}`;
|
||
|
||
// 更新全局筛选器状态
|
||
globalUIState.filters.uiState.topK.value = topkVal;
|
||
|
||
// *** 根据当前标签页决定保存位置 ***
|
||
if (globalUIState.filterTab.activeTab === 'subtract' && globalUIState.dataSource.subtractIndex !== null) {
|
||
// 减数图筛选器标签：保存到减数图的visualConfig
|
||
const subtractIndex = globalUIState.dataSource.subtractIndex;
|
||
const config = allSimilarityResults[subtractIndex].visualConfig;
|
||
config.filters.topK.value = topkVal;
|
||
|
||
// 标记布尔矩阵缓存失效
|
||
if (config.cachedMasks) {
|
||
config.cachedMasks.topKMask = null;
|
||
config.cachedMasks.finalMask = null;
|
||
}
|
||
|
||
console.log(`[减数图筛选器] 保存Top-K值: ${topkVal}，缓存已失效`);
|
||
} else if (globalUIState.exclusiveMode.active && globalUIState.exclusiveMode.editingIndex !== null) {
|
||
// 独占模式：保存到编辑中的图表配置
|
||
const config = allSimilarityResults[globalUIState.exclusiveMode.editingIndex].visualConfig;
|
||
config.filters.topK.value = topkVal;
|
||
|
||
// 标记布尔矩阵缓存失效
|
||
if (config.cachedMasks) {
|
||
config.cachedMasks.topKMask = null;
|
||
config.cachedMasks.finalMask = null;
|
||
}
|
||
|
||
console.log(`[独占模式] 保存Top-K值: ${topkVal}，缓存已失效`);
|
||
} else {
|
||
// *** 非独占模式：更新临时筛选器 ***
|
||
globalUIState.temporaryFilter.enabled = true;
|
||
globalUIState.temporaryFilter.topK.value = topkVal;
|
||
console.log(`[临时筛选器] 更新Top-K值: ${topkVal}`);
|
||
}
|
||
|
||
// 更新按钮状态
|
||
updateTopkButtons();
|
||
}
|
||
// 添加input事件监听器，实现拖动时实时更新热力图(使用防抖优化)
|
||
topkSlider.addEventListener('input', function () {
|
||
updateTopkDisplayInternal();
|
||
|
||
// 防抖: 延迟100ms更新热力图和统计信息
|
||
clearTimeout(heatmapUpdateTimer);
|
||
heatmapUpdateTimer = setTimeout(() => {
|
||
if (filteredMatrix || globalUIState.dataSource.currentMatrix) {
|
||
updateHeatmap();
|
||
|
||
// 统计信息也使用防抖,在热力图更新后执行
|
||
// 传递 activatePanel=false，只更新数据不打开面板
|
||
clearTimeout(statsUpdateTimer);
|
||
statsUpdateTimer = setTimeout(() => {
|
||
if (globalUIState.dataSource.subtractIndex !== null) {
|
||
showDifferenceStatistics(false);
|
||
} else {
|
||
showStatistics(false);
|
||
}
|
||
}, 50);
|
||
}
|
||
}, dynamicDebounceDelay);
|
||
});
|
||
|
||
updateTopkDisplayInternal();
|
||
}
|
||
|
||
// 更新Top-K显示（供外部调用）
|
||
function updateTopkDisplay() {
|
||
const topkSlider = document.getElementById('topkSlider');
|
||
const topkValue = parseInt(topkSlider.value);
|
||
document.getElementById('topkValue').textContent = topkValue;
|
||
document.getElementById('topkStatus').textContent = topkValue === 0 ? '显示全部' : `显示Top-${topkValue}`;
|
||
}
|
||
|
||
// 初始化颜色方案选择器
|
||
function initColorSchemeSelector() {
|
||
const colorBtns = document.querySelectorAll('.colorscheme-btn');
|
||
|
||
colorBtns.forEach(btn => {
|
||
btn.addEventListener('click', function () {
|
||
// 移除所有active类
|
||
colorBtns.forEach(b => b.classList.remove('active'));
|
||
// 添加当前active类
|
||
this.classList.add('active');
|
||
|
||
currentColorScheme = this.dataset.scheme;
|
||
|
||
// 重新绘制热力图
|
||
if (filteredMatrix) {
|
||
updateHeatmap(false);
|
||
}
|
||
});
|
||
});
|
||
}
|
||
|
||
/**
|
||
* 初始化显示字段选择器
|
||
*/
|
||
function initDisplayFieldSelectors() {
|
||
const xDisplayFieldEl = document.getElementById('xDisplayField');
|
||
const yDisplayFieldEl = document.getElementById('yDisplayField');
|
||
|
||
if (!xDisplayFieldEl || !yDisplayFieldEl) {
|
||
console.log('[显示字段选择器] 元素不存在，跳过初始化');
|
||
return;
|
||
}
|
||
|
||
// X轴显示字段选择器
|
||
xDisplayFieldEl.addEventListener('change', function () {
|
||
const xField = this.value;
|
||
console.log(`[显示字段] X轴字段切换为: ${xField}`);
|
||
|
||
// 更新全局状态
|
||
globalUIState.displayFields.xField = xField;
|
||
|
||
// *** 只在独占模式下才保存到图表配置 ***
|
||
if (globalUIState.exclusiveMode.active && globalUIState.exclusiveMode.editingIndex !== null) {
|
||
const config = allSimilarityResults[globalUIState.exclusiveMode.editingIndex].visualConfig;
|
||
config.displayFields.xField = xField;
|
||
console.log(`[独占模式] 保存X轴显示字段: ${xField}`);
|
||
}
|
||
|
||
// 重新生成X轴标签并更新热力图
|
||
if (globalUIState.dataSource.currentXData.length > 0) {
|
||
globalUIState.dataSource.currentXLabels = generateUniqueLabels(
|
||
globalUIState.dataSource.currentXData,
|
||
xField
|
||
);
|
||
updateHeatmapFromGlobalState(false, false); // zOnly=false 因为需要更新坐标轴标签
|
||
}
|
||
});
|
||
|
||
// Y轴显示字段选择器
|
||
yDisplayFieldEl.addEventListener('change', function () {
|
||
const yField = this.value;
|
||
console.log(`[显示字段] Y轴字段切换为: ${yField}`);
|
||
|
||
// 更新全局状态
|
||
globalUIState.displayFields.yField = yField;
|
||
|
||
// *** 只在独占模式下才保存到图表配置 ***
|
||
if (globalUIState.exclusiveMode.active && globalUIState.exclusiveMode.editingIndex !== null) {
|
||
const config = allSimilarityResults[globalUIState.exclusiveMode.editingIndex].visualConfig;
|
||
config.displayFields.yField = yField;
|
||
console.log(`[独占模式] 保存Y轴显示字段: ${yField}`);
|
||
}
|
||
|
||
// 重新生成Y轴标签并更新热力图
|
||
if (globalUIState.dataSource.currentYData.length > 0) {
|
||
globalUIState.dataSource.currentYLabels = generateUniqueLabels(
|
||
globalUIState.dataSource.currentYData,
|
||
yField
|
||
);
|
||
updateHeatmapFromGlobalState(false, false); // zOnly=false 因为需要更新坐标轴标签
|
||
}
|
||
});
|
||
}
|
||
|
||
// =====
|
||
// 导出功能
|
||
// =====
|
||
|
||
|
||
// 导出JSON功能
|
||
async function exportToJSON() {
|
||
if (!allSimilarityResults || allSimilarityResults.length === 0) {
|
||
showError('没有可导出的数据，请先计算相似度');
|
||
return;
|
||
}
|
||
|
||
try {
|
||
// 显示导出状态
|
||
const exportBtn = document.getElementById('exportJsonBtn');
|
||
exportBtn.textContent = '导出中...';
|
||
exportBtn.disabled = true;
|
||
|
||
// 获取选中要导出的图表索引
|
||
const exportSelect = document.getElementById('exportMatrixSelect');
|
||
const selectedIndex = parseInt(exportSelect.value);
|
||
|
||
if (isNaN(selectedIndex) || selectedIndex < 0 || selectedIndex >= allSimilarityResults.length) {
|
||
showError('请选择要导出的图表');
|
||
return;
|
||
}
|
||
|
||
// 获取选中的图表数据
|
||
const selectedResult = allSimilarityResults[selectedIndex];
|
||
|
||
// 构建导出数据结构
|
||
// 注意: 这里导出的是 visualConfig 中的原始数值配置，而不是布尔矩阵
|
||
const exportData = {
|
||
version: "1.0",
|
||
timestamp: new Date().toISOString(),
|
||
exportedMatrix: {
|
||
index: selectedIndex,
|
||
xCollection: selectedResult.xCollection,
|
||
yCollection: selectedResult.yCollection,
|
||
matrix: selectedResult.matrix, // 原始相似度矩阵
|
||
xData: selectedResult.xData,
|
||
yData: selectedResult.yData,
|
||
xAvailableFields: selectedResult.xAvailableFields,
|
||
yAvailableFields: selectedResult.yAvailableFields
|
||
// stats字段已移除,统计信息现在实时计算
|
||
},
|
||
// 导出该图的可视化配置（包含原始的数值配置）
|
||
visualConfig: {
|
||
displayFields: {
|
||
xField: selectedResult.visualConfig.displayFields.xField,
|
||
yField: selectedResult.visualConfig.displayFields.yField
|
||
},
|
||
// 导出原始阈值配置（数值形式）
|
||
similarityRange: {
|
||
min: selectedResult.visualConfig.similarityRange.min,
|
||
max: selectedResult.visualConfig.similarityRange.max
|
||
},
|
||
// 导出原始 Top-K 配置（数值形式）
|
||
filters: {
|
||
topK: {
|
||
value: selectedResult.visualConfig.filters.topK.value,
|
||
axis: selectedResult.visualConfig.filters.topK.axis
|
||
}
|
||
},
|
||
// 导出排序配置
|
||
sorting: {
|
||
order: selectedResult.visualConfig.sorting.order
|
||
}
|
||
// 注意: 不导出 cachedMasks (布尔矩阵缓存)，因为它们是计算中间结果
|
||
}
|
||
};
|
||
|
||
// 转换为JSON字符串
|
||
const jsonString = JSON.stringify(exportData, null, 2);
|
||
|
||
// 生成文件名
|
||
const timestamp = new Date().toISOString().replace(/[:.]/g, '-').slice(0, 19);
|
||
const filename = `相似度分析_图${selectedIndex + 1}_${selectedResult.xCollection}_vs_${selectedResult.yCollection}_${timestamp}.json`;
|
||
|
||
// 创建Blob并下载
|
||
const blob = new Blob([jsonString], { type: 'application/json' });
|
||
const url = window.URL.createObjectURL(blob);
|
||
|
||
const a = document.createElement('a');
|
||
a.href = url;
|
||
a.download = filename;
|
||
document.body.appendChild(a);
|
||
a.click();
|
||
document.body.removeChild(a);
|
||
window.URL.revokeObjectURL(url);
|
||
|
||
showSuccess(`JSON文件导出成功：${filename}`);
|
||
|
||
} catch (error) {
|
||
console.error('导出JSON时出错:', error);
|
||
showError('导出JSON失败: ' + error.message);
|
||
} finally {
|
||
// 恢复按钮状态
|
||
const exportBtn = document.getElementById('exportJsonBtn');
|
||
exportBtn.textContent = '导出JSON';
|
||
exportBtn.disabled = false;
|
||
}
|
||
}
|
||
|
||
// 导出所有JSON功能
|
||
async function exportAllToJSON() {
|
||
if (!allSimilarityResults || allSimilarityResults.length === 0) {
|
||
showError('没有可导出的数据，请先计算相似度');
|
||
return;
|
||
}
|
||
|
||
const exportBtn = document.getElementById('exportAllJsonBtn');
|
||
const totalCount = allSimilarityResults.length;
|
||
|
||
try {
|
||
exportBtn.disabled = true;
|
||
|
||
for (let i = 0; i < totalCount; i++) {
|
||
exportBtn.textContent = `导出中 (${i + 1}/${totalCount})...`;
|
||
|
||
const selectedResult = allSimilarityResults[i];
|
||
|
||
// 构建导出数据结构（与单个导出一致）
|
||
const exportData = {
|
||
version: "1.0",
|
||
timestamp: new Date().toISOString(),
|
||
exportedMatrix: {
|
||
index: i,
|
||
xCollection: selectedResult.xCollection,
|
||
yCollection: selectedResult.yCollection,
|
||
matrix: selectedResult.matrix,
|
||
xData: selectedResult.xData,
|
||
yData: selectedResult.yData,
|
||
xAvailableFields: selectedResult.xAvailableFields,
|
||
yAvailableFields: selectedResult.yAvailableFields
|
||
},
|
||
visualConfig: {
|
||
displayFields: {
|
||
xField: selectedResult.visualConfig.displayFields.xField,
|
||
yField: selectedResult.visualConfig.displayFields.yField
|
||
},
|
||
similarityRange: {
|
||
min: selectedResult.visualConfig.similarityRange.min,
|
||
max: selectedResult.visualConfig.similarityRange.max
|
||
},
|
||
filters: {
|
||
topK: {
|
||
value: selectedResult.visualConfig.filters.topK.value,
|
||
axis: selectedResult.visualConfig.filters.topK.axis
|
||
}
|
||
},
|
||
sorting: {
|
||
order: selectedResult.visualConfig.sorting.order
|
||
}
|
||
}
|
||
};
|
||
|
||
const jsonString = JSON.stringify(exportData, null, 2);
|
||
const timestamp = new Date().toISOString().replace(/[:.]/g, '-').slice(0, 19);
|
||
const filename = `相似度分析_图${i + 1}_${selectedResult.xCollection}_vs_${selectedResult.yCollection}_${timestamp}.json`;
|
||
|
||
const blob = new Blob([jsonString], { type: 'application/json' });
|
||
const url = window.URL.createObjectURL(blob);
|
||
|
||
const a = document.createElement('a');
|
||
a.href = url;
|
||
a.download = filename;
|
||
document.body.appendChild(a);
|
||
a.click();
|
||
document.body.removeChild(a);
|
||
window.URL.revokeObjectURL(url);
|
||
|
||
// 下载间隔，避免浏览器拦截
|
||
if (i < totalCount - 1) {
|
||
await new Promise(resolve => setTimeout(resolve, 300));
|
||
}
|
||
}
|
||
|
||
showSuccess(`已成功导出 ${totalCount} 个JSON文件`);
|
||
|
||
} catch (error) {
|
||
console.error('导出所有JSON时出错:', error);
|
||
showError('导出JSON失败: ' + error.message);
|
||
} finally {
|
||
exportBtn.textContent = '导出所有JSON';
|
||
exportBtn.disabled = false;
|
||
}
|
||
}
|
||
|
||
// =====
|
||
// 导入功能
|
||
// =====
|
||
|
||
/**
|
||
* 触发文件选择器
|
||
*/
|
||
function triggerImportJSON() {
|
||
const fileInput = document.getElementById('importFileInput');
|
||
if (fileInput) {
|
||
// 重置文件输入,允许重复导入同一个文件
|
||
fileInput.value = '';
|
||
fileInput.click();
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 处理导入的文件(支持多文件)
|
||
*/
|
||
async function handleImportFile(event) {
|
||
const files = Array.from(event.target.files);
|
||
if (!files || files.length === 0) {
|
||
return;
|
||
}
|
||
|
||
// 检查所有文件类型
|
||
const invalidFiles = files.filter(file => !file.name.endsWith('.json'));
|
||
if (invalidFiles.length > 0) {
|
||
showError(`以下文件不是JSON格式: ${invalidFiles.map(f => f.name).join(', ')}`);
|
||
return;
|
||
}
|
||
|
||
try {
|
||
// *** 记录导入前的图表数量，用于判断是否首次导入 ***
|
||
const isFirstImport = allSimilarityResults.length === 0;
|
||
|
||
// 用于收集导入结果
|
||
const importResults = {
|
||
success: [],
|
||
failed: []
|
||
};
|
||
|
||
// 逐个处理文件
|
||
for (let i = 0; i < files.length; i++) {
|
||
const file = files[i];
|
||
const fileIndex = i + 1;
|
||
const totalFiles = files.length;
|
||
|
||
try {
|
||
showLoading(true, `正在导入第 ${fileIndex}/${totalFiles} 个文件: ${file.name}...`);
|
||
|
||
// 读取文件内容
|
||
const fileContent = await readFileAsText(file);
|
||
|
||
// 解析JSON
|
||
let importedData;
|
||
try {
|
||
importedData = JSON.parse(fileContent);
|
||
} catch (e) {
|
||
throw new Error(`JSON格式错误: ${e.message}`);
|
||
}
|
||
|
||
// 验证数据格式
|
||
const validationError = validateImportedData(importedData);
|
||
if (validationError) {
|
||
throw new Error(`数据验证失败: ${validationError}`);
|
||
}
|
||
|
||
// 导入数据到allSimilarityResults
|
||
importDataToResults(importedData);
|
||
|
||
// 初始化新图表的按钮状态
|
||
const newIndex = allSimilarityResults.length - 1;
|
||
if (!matrixButtonStates[newIndex]) {
|
||
matrixButtonStates[newIndex] = {
|
||
index: newIndex,
|
||
applyData: false,
|
||
applyFilter: false,
|
||
exclusive: false
|
||
};
|
||
}
|
||
|
||
// 记录成功
|
||
importResults.success.push({
|
||
fileName: file.name,
|
||
xCollection: importedData.exportedMatrix.xCollection,
|
||
yCollection: importedData.exportedMatrix.yCollection
|
||
});
|
||
|
||
} catch (error) {
|
||
console.error(`导入文件 ${file.name} 时出错:`, error);
|
||
importResults.failed.push({
|
||
fileName: file.name,
|
||
error: error.message
|
||
});
|
||
}
|
||
}
|
||
|
||
// 更新UI (使用新架构的函数)
|
||
updateMatrixListUI();
|
||
updateExportMatrixSelector();
|
||
|
||
// 显示图表选择控制区域 (添加空值检查)
|
||
const matrixSelectorControl = document.getElementById('matrixSelectorControl');
|
||
const displayFieldControls = document.getElementById('displayFieldControls');
|
||
const yDisplayFieldControls = document.getElementById('yDisplayFieldControls');
|
||
const statsSection = document.getElementById('statsSection');
|
||
const operationsSection = document.getElementById('operationsSection');
|
||
|
||
if (matrixSelectorControl) matrixSelectorControl.style.display = 'block';
|
||
if (displayFieldControls) displayFieldControls.style.display = 'block';
|
||
if (yDisplayFieldControls) yDisplayFieldControls.style.display = 'block';
|
||
if (statsSection) statsSection.style.display = 'block';
|
||
if (operationsSection) operationsSection.style.display = 'block';
|
||
|
||
// *** 首次导入数据时自动启用第一张图的独占模式 ***
|
||
if (isFirstImport && allSimilarityResults.length > 0) {
|
||
console.log('[自动独占] 首次导入数据，自动启用图0的独占模式');
|
||
await enterExclusiveMode(0);
|
||
updateMatrixListUI(); // 再次更新UI以反映独占模式状态
|
||
}
|
||
|
||
// 显示导入结果
|
||
showLoading(false);
|
||
|
||
let resultMessage = '';
|
||
if (importResults.success.length > 0) {
|
||
resultMessage += `成功导入 ${importResults.success.length} 个文件`;
|
||
if (importResults.success.length === 1) {
|
||
const item = importResults.success[0];
|
||
resultMessage = `成功导入数据: ${item.xCollection} vs ${item.yCollection}`;
|
||
}
|
||
if (isFirstImport) {
|
||
resultMessage += '，已自动启用编辑模式';
|
||
}
|
||
}
|
||
|
||
if (importResults.failed.length > 0) {
|
||
const failedList = importResults.failed.map(item =>
|
||
`${item.fileName}: ${item.error}`
|
||
).join('\n');
|
||
|
||
if (importResults.success.length > 0) {
|
||
showError(`部分文件导入失败:\n${failedList}\n\n${resultMessage}`);
|
||
} else {
|
||
showError(`所有文件导入失败:\n${failedList}`);
|
||
}
|
||
} else {
|
||
showSuccess(resultMessage);
|
||
}
|
||
|
||
} catch (error) {
|
||
console.error('导入数据时出错:', error);
|
||
showError('导入出错: ' + error.message);
|
||
showLoading(false);
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 读取文件为文本
|
||
*/
|
||
function readFileAsText(file) {
|
||
return new Promise((resolve, reject) => {
|
||
const reader = new FileReader();
|
||
reader.onload = (e) => resolve(e.target.result);
|
||
reader.onerror = () => reject(new Error('文件读取失败'));
|
||
reader.readAsText(file);
|
||
});
|
||
}
|
||
|
||
/**
|
||
* 验证导入的数据格式
|
||
*/
|
||
function validateImportedData(data) {
|
||
// 检查版本
|
||
if (!data.version) {
|
||
return '缺少版本信息';
|
||
}
|
||
|
||
// 检查exportedMatrix
|
||
if (!data.exportedMatrix) {
|
||
return '缺少exportedMatrix字段';
|
||
}
|
||
|
||
const matrix = data.exportedMatrix;
|
||
|
||
// 检查必要字段
|
||
const requiredFields = [
|
||
'xCollection', 'yCollection', 'matrix',
|
||
'xData', 'yData',
|
||
'xAvailableFields', 'yAvailableFields'
|
||
// 注意: stats字段已改为实时计算,不再作为必需字段
|
||
];
|
||
|
||
for (const field of requiredFields) {
|
||
if (!matrix[field]) {
|
||
return `缺少必要字段: ${field}`;
|
||
}
|
||
}
|
||
|
||
// 检查数组类型
|
||
if (!Array.isArray(matrix.matrix)) {
|
||
return 'matrix必须是数组';
|
||
}
|
||
if (!Array.isArray(matrix.xData)) {
|
||
return 'xData必须是数组';
|
||
}
|
||
if (!Array.isArray(matrix.yData)) {
|
||
return 'yData必须是数组';
|
||
}
|
||
if (!Array.isArray(matrix.xAvailableFields)) {
|
||
return 'xAvailableFields必须是数组';
|
||
}
|
||
if (!Array.isArray(matrix.yAvailableFields)) {
|
||
return 'yAvailableFields必须是数组';
|
||
}
|
||
|
||
// 检查矩阵维度
|
||
if (matrix.matrix.length !== matrix.yData.length) {
|
||
return `矩阵行数(${matrix.matrix.length})与yData长度(${matrix.yData.length})不匹配`;
|
||
}
|
||
|
||
if (matrix.matrix.length > 0 && matrix.matrix[0].length !== matrix.xData.length) {
|
||
return `矩阵列数(${matrix.matrix[0].length})与xData长度(${matrix.xData.length})不匹配`;
|
||
}
|
||
|
||
// 检查visualConfig (可选,如果不存在则使用默认值)
|
||
if (data.visualConfig) {
|
||
if (!data.visualConfig.displayFields) {
|
||
return 'visualConfig缺少displayFields';
|
||
}
|
||
}
|
||
|
||
return null; // 验证通过
|
||
}
|
||
|
||
/**
|
||
* 将导入的数据添加到allSimilarityResults
|
||
*/
|
||
function importDataToResults(importedData) {
|
||
const matrix = importedData.exportedMatrix;
|
||
|
||
// 如果有visualConfig就使用,否则创建默认配置
|
||
let visualConfig;
|
||
if (importedData.visualConfig) {
|
||
// 使用导入的配置,但需要补充cachedMasks
|
||
visualConfig = {
|
||
displayFields: {
|
||
xField: importedData.visualConfig.displayFields.xField,
|
||
yField: importedData.visualConfig.displayFields.yField
|
||
},
|
||
similarityRange: {
|
||
min: importedData.visualConfig.similarityRange?.min ?? 0,
|
||
max: importedData.visualConfig.similarityRange?.max ?? 1
|
||
},
|
||
filters: {
|
||
topK: {
|
||
value: importedData.visualConfig.filters?.topK?.value ?? 0,
|
||
axis: importedData.visualConfig.filters?.topK?.axis ?? 'x'
|
||
}
|
||
},
|
||
sorting: {
|
||
order: importedData.visualConfig.sorting?.order ?? 'none'
|
||
},
|
||
cachedMasks: {
|
||
thresholdMask: null,
|
||
topKMask: null,
|
||
finalMask: null
|
||
}
|
||
};
|
||
} else {
|
||
// 创建默认配置
|
||
visualConfig = createDefaultVisualConfig(
|
||
matrix.xAvailableFields,
|
||
matrix.yAvailableFields
|
||
);
|
||
}
|
||
|
||
// 构建结果对象并添加到数组
|
||
const resultObject = {
|
||
xCollection: matrix.xCollection,
|
||
yCollection: matrix.yCollection,
|
||
matrix: matrix.matrix,
|
||
xData: matrix.xData,
|
||
yData: matrix.yData,
|
||
xAvailableFields: matrix.xAvailableFields,
|
||
yAvailableFields: matrix.yAvailableFields,
|
||
// stats字段已移除,统计信息现在实时计算
|
||
visualConfig: visualConfig
|
||
};
|
||
|
||
allSimilarityResults.push(resultObject);
|
||
}
|
||
|
||
// =====
|
||
// 事件监听器
|
||
// =====
|
||
|
||
// 监听窗口大小变化，重新调整图表大小
|
||
window.addEventListener('resize', function () {
|
||
if (document.getElementById('heatmap').innerHTML && filteredMatrix) {
|
||
// 延迟执行以确保容器尺寸已更新
|
||
setTimeout(() => {
|
||
resizeHeatmap();
|
||
}, 150);
|
||
}
|
||
});
|
||
|
||
// =====
|
||
// 新架构：核心状态管理函数
|
||
// =====
|
||
|
||
/**
|
||
* 初始化按钮状态数组
|
||
*/
|
||
function initializeButtonStates() {
|
||
matrixButtonStates = allSimilarityResults.map((_, index) => ({
|
||
index: index,
|
||
applyData: false,
|
||
applyFilter: false,
|
||
exclusive: false
|
||
}));
|
||
}
|
||
|
||
/**
|
||
* 切换"应用数据"按钮
|
||
* @param {number} index - 图表索引
|
||
*/
|
||
function toggleApplyDataButton(index) {
|
||
console.log(`[应用数据] 切换按钮 ${index}`);
|
||
|
||
const currentState = matrixButtonStates[index].applyData;
|
||
|
||
if (currentState) {
|
||
// 当前已启用，要关闭
|
||
// 如果当前是独占模式，先退出
|
||
if (globalUIState.exclusiveMode.active) {
|
||
exitExclusiveMode();
|
||
}
|
||
|
||
if (globalUIState.dataSource.primaryIndex === index) {
|
||
// 关闭主数据源
|
||
globalUIState.dataSource.primaryIndex = null;
|
||
globalUIState.dataSource.currentMatrix = null;
|
||
matrixButtonStates[index].applyData = false;
|
||
|
||
// 如果有减数，提升为主数据源
|
||
if (globalUIState.dataSource.subtractIndex !== null) {
|
||
const subtractIdx = globalUIState.dataSource.subtractIndex;
|
||
globalUIState.dataSource.primaryIndex = subtractIdx;
|
||
globalUIState.dataSource.subtractIndex = null;
|
||
loadDataFromMatrix(subtractIdx, false);
|
||
// 退出减数模式，隐藏筛选器标签切换
|
||
hideFilterTabs();
|
||
}
|
||
} else if (globalUIState.dataSource.subtractIndex === index) {
|
||
// 关闭减数
|
||
globalUIState.dataSource.subtractIndex = null;
|
||
matrixButtonStates[index].applyData = false;
|
||
// 重新加载主数据源（退出差值模式）
|
||
loadDataFromMatrix(globalUIState.dataSource.primaryIndex, false);
|
||
// 退出减数模式，隐藏筛选器标签切换
|
||
hideFilterTabs();
|
||
}
|
||
} else {
|
||
// 当前未启用，要开启 - 先检查矩阵大小一致性
|
||
const sizeCheck = checkMatrixSizeConsistency(index, 'applyData');
|
||
if (!sizeCheck.isValid) {
|
||
console.warn(`[应用数据] 矩阵大小检查失败: ${sizeCheck.message}`);
|
||
showWarning(sizeCheck.message, 4000);
|
||
return; // 阻止按钮切换，不退出独占模式
|
||
}
|
||
|
||
// 矩阵大小检查通过后，才退出独占模式
|
||
if (globalUIState.exclusiveMode.active) {
|
||
exitExclusiveMode();
|
||
}
|
||
|
||
if (globalUIState.dataSource.primaryIndex === null) {
|
||
// 没有主数据源，设为主数据源
|
||
globalUIState.dataSource.primaryIndex = index;
|
||
matrixButtonStates[index].applyData = true;
|
||
loadDataFromMatrix(index, false);
|
||
} else if (globalUIState.dataSource.subtractIndex === null) {
|
||
// 已有主数据源，没有减数，设为减数（差值模式）
|
||
globalUIState.dataSource.subtractIndex = index;
|
||
matrixButtonStates[index].applyData = true;
|
||
// 同时激活减数图的筛选器
|
||
matrixButtonStates[index].applyFilter = true;
|
||
if (!globalUIState.filters.activeFilterIndices.includes(index)) {
|
||
globalUIState.filters.activeFilterIndices.push(index);
|
||
}
|
||
loadDifferenceData(globalUIState.dataSource.primaryIndex, index);
|
||
} else {
|
||
// 已有主数据源和减数，替换减数
|
||
const oldSubtract = globalUIState.dataSource.subtractIndex;
|
||
matrixButtonStates[oldSubtract].applyData = false;
|
||
// 关闭旧减数的筛选器
|
||
matrixButtonStates[oldSubtract].applyFilter = false;
|
||
globalUIState.filters.activeFilterIndices = globalUIState.filters.activeFilterIndices.filter(i => i !== oldSubtract);
|
||
globalUIState.dataSource.subtractIndex = index;
|
||
matrixButtonStates[index].applyData = true;
|
||
// 同时激活新减数图的筛选器
|
||
matrixButtonStates[index].applyFilter = true;
|
||
if (!globalUIState.filters.activeFilterIndices.includes(index)) {
|
||
globalUIState.filters.activeFilterIndices.push(index);
|
||
}
|
||
loadDifferenceData(globalUIState.dataSource.primaryIndex, index);
|
||
}
|
||
}
|
||
|
||
updateMatrixListUI();
|
||
// 切换图表时只更新数据，不主动打开统计面板
|
||
updateHeatmapFromGlobalState(false, false); // zOnly=false 因为切换图表需要更新坐标轴等
|
||
}
|
||
|
||
/**
|
||
* 从矩阵加载数据到全局状态
|
||
* @param {number} index - 图表索引
|
||
* @param {boolean} isDifference - 是否为差值模式
|
||
*/
|
||
function loadDataFromMatrix(index, isDifference = false) {
|
||
console.log(`[加载数据] 从图 ${index} 加载，差值模式: ${isDifference}`);
|
||
|
||
const matrixData = allSimilarityResults[index];
|
||
|
||
// 加载原始数据
|
||
globalUIState.dataSource.currentMatrix = matrixData.matrix;
|
||
globalUIState.dataSource.currentXData = matrixData.xData;
|
||
globalUIState.dataSource.currentYData = matrixData.yData;
|
||
globalUIState.dataSource.xAvailableFields = matrixData.xAvailableFields;
|
||
globalUIState.dataSource.yAvailableFields = matrixData.yAvailableFields;
|
||
|
||
// 更新显示字段（使用该图的配置）
|
||
const defaultXField = matrixData.visualConfig.displayFields.xField;
|
||
const defaultYField = matrixData.visualConfig.displayFields.yField;
|
||
|
||
globalUIState.displayFields.xField = defaultXField;
|
||
globalUIState.displayFields.yField = defaultYField;
|
||
|
||
// 生成标签
|
||
globalUIState.dataSource.currentXLabels = generateUniqueLabels(
|
||
globalUIState.dataSource.currentXData,
|
||
globalUIState.displayFields.xField
|
||
);
|
||
globalUIState.dataSource.currentYLabels = generateUniqueLabels(
|
||
globalUIState.dataSource.currentYData,
|
||
globalUIState.displayFields.yField
|
||
);
|
||
|
||
// 更新显示字段选择器
|
||
updateDisplayFieldSelectorsFromGlobalState();
|
||
}
|
||
|
||
/**
|
||
* 加载差值数据
|
||
* @param {number} primaryIndex - 主数据源索引
|
||
* @param {number} subtractIndex - 减数索引
|
||
*/
|
||
function loadDifferenceData(primaryIndex, subtractIndex) {
|
||
console.log(`[差值模式] 主图: ${primaryIndex}, 减数图: ${subtractIndex}`);
|
||
|
||
const cacheKey = `${primaryIndex}-${subtractIndex}`;
|
||
|
||
// 检查缓存
|
||
if (!differenceMatrices[cacheKey]) {
|
||
const matrix1 = allSimilarityResults[primaryIndex].matrix;
|
||
const matrix2 = allSimilarityResults[subtractIndex].matrix;
|
||
|
||
// 检查矩阵大小是否一致
|
||
if (matrix1.length !== matrix2.length || matrix1[0].length !== matrix2[0].length) {
|
||
showError('无法计算差值：两个矩阵大小不一致');
|
||
return;
|
||
}
|
||
|
||
differenceMatrices[cacheKey] = matrix1.map((row, i) =>
|
||
row.map((val, j) => val - matrix2[i][j])
|
||
);
|
||
}
|
||
|
||
// 使用主数据源的元数据，但矩阵是差值
|
||
const primaryData = allSimilarityResults[primaryIndex];
|
||
|
||
globalUIState.dataSource.currentMatrix = differenceMatrices[cacheKey];
|
||
globalUIState.dataSource.currentXData = primaryData.xData;
|
||
globalUIState.dataSource.currentYData = primaryData.yData;
|
||
globalUIState.dataSource.xAvailableFields = primaryData.xAvailableFields;
|
||
globalUIState.dataSource.yAvailableFields = primaryData.yAvailableFields;
|
||
|
||
// 更新显示字段（使用主图的配置）
|
||
const primaryXField = primaryData.visualConfig.displayFields.xField;
|
||
const primaryYField = primaryData.visualConfig.displayFields.yField;
|
||
|
||
globalUIState.displayFields.xField = primaryXField;
|
||
globalUIState.displayFields.yField = primaryYField;
|
||
|
||
// 生成标签
|
||
globalUIState.dataSource.currentXLabels = generateUniqueLabels(
|
||
globalUIState.dataSource.currentXData,
|
||
globalUIState.displayFields.xField
|
||
);
|
||
globalUIState.dataSource.currentYLabels = generateUniqueLabels(
|
||
globalUIState.dataSource.currentYData,
|
||
globalUIState.displayFields.yField
|
||
);
|
||
|
||
// 更新显示字段选择器
|
||
updateDisplayFieldSelectorsFromGlobalState();
|
||
|
||
// *** 重置临时筛选器（差值模式）***
|
||
resetTemporaryFilter(true);
|
||
applyTemporaryFilterToUI();
|
||
|
||
// *** 差值模式：将阈值重置为 -1 到 1 ***
|
||
globalUIState.filters.uiState.similarityRange.min = -1;
|
||
globalUIState.filters.uiState.similarityRange.max = 1;
|
||
|
||
// 获取UI控件
|
||
const minSlider = document.getElementById('minSimilaritySlider');
|
||
const maxSlider = document.getElementById('maxSimilaritySlider');
|
||
const minInput = document.getElementById('minSimilarityInput');
|
||
const maxInput = document.getElementById('maxSimilarityInput');
|
||
|
||
// *** 重要：先更新滑块的min/max范围，再设置value ***
|
||
minSlider.min = -1;
|
||
minSlider.max = 1;
|
||
maxSlider.min = -1;
|
||
maxSlider.max = 1;
|
||
minInput.min = -1;
|
||
minInput.max = 1;
|
||
maxInput.min = -1;
|
||
maxInput.max = 1;
|
||
|
||
// 然后再设置滑块的值
|
||
minSlider.value = -1;
|
||
maxSlider.value = 1;
|
||
minInput.value = -1;
|
||
maxInput.value = 1;
|
||
|
||
// 更新滑块轨道
|
||
const track = document.getElementById('similarityTrack');
|
||
const pos = calculateTrackPosition(-1, 1, minSlider);
|
||
track.style.left = pos.left + 'px';
|
||
track.style.width = pos.width + 'px';
|
||
|
||
console.log('[差值模式] 阈值已重置为 -1.00 到 1.00');
|
||
|
||
// 显示筛选器标签切换
|
||
showFilterTabs();
|
||
}
|
||
|
||
// ============================================================================
|
||
// 筛选器标签页切换功能
|
||
// ============================================================================
|
||
|
||
/**
|
||
* 显示筛选器标签页切换按钮（在减数模式下调用）
|
||
*/
|
||
function showFilterTabs() {
|
||
const header = document.getElementById('filterTabsHeader');
|
||
if (header) {
|
||
header.style.display = '';
|
||
console.log('[筛选器标签] 显示标签切换');
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 隐藏筛选器标签页切换按钮并切回主筛选器
|
||
*/
|
||
function hideFilterTabs() {
|
||
const header = document.getElementById('filterTabsHeader');
|
||
if (header) {
|
||
header.style.display = 'none';
|
||
console.log('[筛选器标签] 隐藏标签切换');
|
||
}
|
||
|
||
// 切回主筛选器标签
|
||
if (globalUIState.filterTab.activeTab !== 'main') {
|
||
switchFilterTab('main');
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 切换筛选器标签页
|
||
* @param {'main' | 'subtract'} tab - 目标标签
|
||
*/
|
||
function switchFilterTab(tab) {
|
||
console.log(`[筛选器标签] 切换到: ${tab}`);
|
||
globalUIState.filterTab.activeTab = tab;
|
||
|
||
// 更新按钮样式
|
||
const mainBtn = document.getElementById('mainFilterTab');
|
||
const subtractBtn = document.getElementById('subtractFilterTab');
|
||
if (mainBtn) mainBtn.classList.toggle('active', tab === 'main');
|
||
if (subtractBtn) subtractBtn.classList.toggle('active', tab === 'subtract');
|
||
|
||
// 更新提示文字
|
||
const hint = document.getElementById('filterTabHint');
|
||
if (hint) {
|
||
if (tab === 'main') {
|
||
hint.textContent = '当前作用于: 显示数据';
|
||
} else {
|
||
const subtractIndex = globalUIState.dataSource.subtractIndex;
|
||
const matrixName = allSimilarityResults[subtractIndex]?.name || `图表 ${subtractIndex + 1}`;
|
||
hint.textContent = `当前作用于: ${matrixName} (减数图)`;
|
||
}
|
||
}
|
||
|
||
// 控制显示字段选择器的显隐（减数图标签下隐藏）
|
||
const displayFieldControls = document.getElementById('displayFieldControls');
|
||
const yDisplayFieldControls = document.getElementById('yDisplayFieldControls');
|
||
if (tab === 'main') {
|
||
// 主筛选器：恢复显示字段选择器（如果有数据）
|
||
if (displayFieldControls && globalUIState.dataSource.xAvailableFields?.length > 0) {
|
||
displayFieldControls.style.display = '';
|
||
}
|
||
if (yDisplayFieldControls && globalUIState.dataSource.yAvailableFields?.length > 0) {
|
||
yDisplayFieldControls.style.display = '';
|
||
}
|
||
} else {
|
||
// 减数图筛选器：隐藏显示字段选择器
|
||
if (displayFieldControls) displayFieldControls.style.display = 'none';
|
||
if (yDisplayFieldControls) yDisplayFieldControls.style.display = 'none';
|
||
}
|
||
|
||
// 加载对应标签的筛选器值到UI
|
||
loadFilterValuesToUI(tab);
|
||
}
|
||
|
||
/**
|
||
* 根据当前标签加载筛选器值到UI控件
|
||
* @param {'main' | 'subtract'} tab
|
||
*/
|
||
function loadFilterValuesToUI(tab) {
|
||
let similarityRange, topK;
|
||
|
||
if (tab === 'main') {
|
||
// 主筛选器：使用当前逻辑（独占模式用编辑图配置，否则用临时筛选器或uiState）
|
||
if (globalUIState.exclusiveMode.active && globalUIState.exclusiveMode.editingIndex !== null) {
|
||
const config = allSimilarityResults[globalUIState.exclusiveMode.editingIndex].visualConfig;
|
||
similarityRange = config.similarityRange;
|
||
topK = config.filters?.topK || { value: 0, axis: 'x' };
|
||
} else {
|
||
// 使用临时筛选器状态
|
||
similarityRange = globalUIState.temporaryFilter.similarityRange;
|
||
topK = globalUIState.temporaryFilter.topK;
|
||
}
|
||
|
||
// 差值模式下，主筛选器使用 -1 到 1 范围
|
||
const isDiff = globalUIState.dataSource.subtractIndex !== null;
|
||
updateSimilaritySliderRange(isDiff ? -1 : 0, 1);
|
||
} else {
|
||
// 减数图筛选器：使用减数图的visualConfig
|
||
const subtractIndex = globalUIState.dataSource.subtractIndex;
|
||
if (subtractIndex === null) {
|
||
console.warn('[筛选器标签] 减数图标签下没有减数图');
|
||
return;
|
||
}
|
||
const config = allSimilarityResults[subtractIndex].visualConfig;
|
||
similarityRange = config.similarityRange;
|
||
topK = config.filters?.topK || { value: 0, axis: 'x' };
|
||
|
||
// 减数图筛选器使用 0 到 1 范围
|
||
updateSimilaritySliderRange(0, 1);
|
||
}
|
||
|
||
// 更新UI控件值
|
||
const minSlider = document.getElementById('minSimilaritySlider');
|
||
const maxSlider = document.getElementById('maxSimilaritySlider');
|
||
const minInput = document.getElementById('minSimilarityInput');
|
||
const maxInput = document.getElementById('maxSimilarityInput');
|
||
const topkSlider = document.getElementById('topkSlider');
|
||
const topkValueSpan = document.getElementById('topkValue');
|
||
const topkStatus = document.getElementById('topkStatus');
|
||
|
||
if (minSlider && maxSlider && minInput && maxInput) {
|
||
minSlider.value = similarityRange.min;
|
||
maxSlider.value = similarityRange.max;
|
||
minInput.value = similarityRange.min;
|
||
maxInput.value = similarityRange.max;
|
||
|
||
// 更新轨道
|
||
const track = document.getElementById('similarityTrack');
|
||
if (track) {
|
||
const pos = calculateTrackPosition(similarityRange.min, similarityRange.max, minSlider);
|
||
track.style.left = pos.left + 'px';
|
||
track.style.width = pos.width + 'px';
|
||
}
|
||
}
|
||
|
||
if (topkSlider && topkValueSpan) {
|
||
const topkVal = topK.value ?? 0;
|
||
topkSlider.value = topkVal;
|
||
topkValueSpan.textContent = topkVal;
|
||
if (topkStatus) {
|
||
topkStatus.textContent = topkVal === 0 ? '显示全部' : `每行/列前${topkVal}项`;
|
||
}
|
||
}
|
||
|
||
// 更新Top-K轴按钮
|
||
updateTopKAxisButtons(topK.axis ?? 'x');
|
||
}
|
||
|
||
/**
|
||
* 更新相似度滑块的范围
|
||
* @param {number} minRange - 最小值范围（如 0 或 -1）
|
||
* @param {number} maxRange - 最大值范围（如 1）
|
||
*/
|
||
function updateSimilaritySliderRange(minRange, maxRange) {
|
||
const minSlider = document.getElementById('minSimilaritySlider');
|
||
const maxSlider = document.getElementById('maxSimilaritySlider');
|
||
const minInput = document.getElementById('minSimilarityInput');
|
||
const maxInput = document.getElementById('maxSimilarityInput');
|
||
|
||
if (minSlider) {
|
||
minSlider.min = minRange;
|
||
minSlider.max = maxRange;
|
||
}
|
||
if (maxSlider) {
|
||
maxSlider.min = minRange;
|
||
maxSlider.max = maxRange;
|
||
}
|
||
if (minInput) {
|
||
minInput.min = minRange;
|
||
minInput.max = maxRange;
|
||
}
|
||
if (maxInput) {
|
||
maxInput.min = minRange;
|
||
maxInput.max = maxRange;
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 更新Top-K轴按钮的激活状态
|
||
* @param {'x' | 'y'} axis
|
||
*/
|
||
function updateTopKAxisButtons(axis) {
|
||
const xBtn = document.getElementById('xAxisBtn');
|
||
const yBtn = document.getElementById('yAxisBtn');
|
||
if (xBtn) xBtn.classList.toggle('active', axis === 'x');
|
||
if (yBtn) yBtn.classList.toggle('active', axis === 'y');
|
||
}
|
||
|
||
/**
|
||
* 切换"应用筛选器"按钮
|
||
* @param {number} index - 图表索引
|
||
*/
|
||
function toggleApplyFilterButton(index) {
|
||
console.log(`[应用筛选器] 切换按钮 ${index}`);
|
||
|
||
const currentState = matrixButtonStates[index].applyFilter;
|
||
|
||
if (currentState) {
|
||
// 当前已启用，要关闭
|
||
// 如果当前是独占模式，先退出
|
||
if (globalUIState.exclusiveMode.active) {
|
||
exitExclusiveMode();
|
||
}
|
||
|
||
matrixButtonStates[index].applyFilter = false;
|
||
globalUIState.filters.activeFilterIndices = globalUIState.filters.activeFilterIndices.filter(i => i !== index);
|
||
} else {
|
||
// 当前未启用，要开启 - 先检查矩阵大小一致性
|
||
const sizeCheck = checkMatrixSizeConsistency(index, 'applyFilter');
|
||
if (!sizeCheck.isValid) {
|
||
console.warn(`[应用筛选器] 矩阵大小检查失败: ${sizeCheck.message}`);
|
||
showWarning(sizeCheck.message, 4000);
|
||
return; // 阻止按钮切换，不退出独占模式
|
||
}
|
||
|
||
// 矩阵大小检查通过后，才退出独占模式
|
||
if (globalUIState.exclusiveMode.active) {
|
||
exitExclusiveMode();
|
||
}
|
||
|
||
matrixButtonStates[index].applyFilter = true;
|
||
globalUIState.filters.activeFilterIndices.push(index);
|
||
}
|
||
|
||
// 合并筛选器（或逻辑）
|
||
mergeFilters();
|
||
|
||
updateMatrixListUI();
|
||
// 切换图表时只更新数据，不主动打开统计面板
|
||
updateHeatmapFromGlobalState(false, false); // zOnly=false 因为切换图表需要更新坐标轴等
|
||
}
|
||
|
||
/**
|
||
* 合并多个筛选器（或逻辑）- 新架构：基于布尔矩阵
|
||
*
|
||
* 注意：这个函数现在主要用于更新UI显示
|
||
* 实际的OR合并在updateHeatmap()中通过combineWithOR()完成
|
||
*/
|
||
function mergeFilters() {
|
||
console.log(`[合并筛选器] 活动筛选器数量: ${globalUIState.filters.activeFilterIndices.length}`);
|
||
|
||
if (globalUIState.filters.activeFilterIndices.length === 0) {
|
||
// 没有活动筛选器，使用默认值
|
||
globalUIState.filters.uiState.similarityRange = { min: 0, max: 1 };
|
||
globalUIState.filters.uiState.topK = { value: 0, axis: 'x' };
|
||
} else if (globalUIState.filters.activeFilterIndices.length === 1) {
|
||
// 只有一个筛选器，直接使用
|
||
const index = globalUIState.filters.activeFilterIndices[0];
|
||
const config = allSimilarityResults[index].visualConfig;
|
||
globalUIState.filters.uiState.similarityRange = { ...config.similarityRange };
|
||
globalUIState.filters.uiState.topK = { ...config.filters.topK };
|
||
} else {
|
||
// 多个筛选器：为了UI显示友好，显示合并后的范围
|
||
// 但实际筛选逻辑在updateHeatmap()中基于布尔矩阵OR运算完成
|
||
let minRange = 1, maxRange = 0;
|
||
let maxTopK = 0;
|
||
let topKAxis = 'x';
|
||
|
||
globalUIState.filters.activeFilterIndices.forEach(index => {
|
||
const config = allSimilarityResults[index].visualConfig;
|
||
minRange = Math.min(minRange, config.similarityRange.min);
|
||
maxRange = Math.max(maxRange, config.similarityRange.max);
|
||
if (config.filters.topK.value > maxTopK) {
|
||
maxTopK = config.filters.topK.value;
|
||
topKAxis = config.filters.topK.axis;
|
||
}
|
||
});
|
||
|
||
globalUIState.filters.uiState.similarityRange = { min: minRange, max: maxRange };
|
||
globalUIState.filters.uiState.topK = { value: maxTopK, axis: topKAxis };
|
||
|
||
console.log(`[合并筛选器] UI显示范围: 阈值 ${minRange.toFixed(2)}-${maxRange.toFixed(2)}, Top-K ${maxTopK}`);
|
||
}
|
||
|
||
// 更新UI控件（仅用于显示）
|
||
applyFilterStateToUI();
|
||
}
|
||
|
||
/**
|
||
* 切换"独占模式"按钮
|
||
* @param {number} index - 图表索引
|
||
*/
|
||
async function toggleExclusiveModeButton(index) {
|
||
console.log(`[独占模式] 切换按钮 ${index}`);
|
||
|
||
const currentState = matrixButtonStates[index].exclusive;
|
||
|
||
if (currentState) {
|
||
// 当前已是独占模式，退出
|
||
exitExclusiveMode();
|
||
} else {
|
||
// 进入独占模式
|
||
await enterExclusiveMode(index);
|
||
}
|
||
|
||
updateMatrixListUI();
|
||
}
|
||
|
||
/**
|
||
* 进入独占模式
|
||
* @param {number} index - 图表索引
|
||
*/
|
||
async function enterExclusiveMode(index) {
|
||
console.log(`[独占模式] 进入，编辑图 ${index}`);
|
||
|
||
// 关闭所有其他按钮
|
||
matrixButtonStates.forEach((state, i) => {
|
||
if (i !== index) {
|
||
state.applyData = false;
|
||
state.applyFilter = false;
|
||
state.exclusive = false;
|
||
}
|
||
});
|
||
|
||
// 启用当前图的两个按钮
|
||
matrixButtonStates[index].applyData = true;
|
||
matrixButtonStates[index].applyFilter = true;
|
||
matrixButtonStates[index].exclusive = true;
|
||
|
||
// 设置全局状态
|
||
globalUIState.exclusiveMode.active = true;
|
||
globalUIState.exclusiveMode.editingIndex = index;
|
||
|
||
// 清空数据源和筛选器
|
||
globalUIState.dataSource.primaryIndex = index;
|
||
globalUIState.dataSource.subtractIndex = null;
|
||
globalUIState.filters.activeFilterIndices = [index];
|
||
|
||
// 进入独占模式时隐藏筛选器标签切换（退出减数模式）
|
||
hideFilterTabs();
|
||
|
||
// 加载该图的所有配置
|
||
loadDataFromMatrix(index, false);
|
||
|
||
// *** 重置临时筛选器（单图模式）***
|
||
resetTemporaryFilter(false);
|
||
applyTemporaryFilterToUI();
|
||
|
||
// 应用该图的筛选器配置
|
||
const config = allSimilarityResults[index].visualConfig;
|
||
globalUIState.filters.uiState.similarityRange = { ...config.similarityRange };
|
||
globalUIState.filters.uiState.topK = { ...config.filters.topK };
|
||
globalUIState.sorting.order = config.sorting.order;
|
||
|
||
// 更新UI
|
||
applyFilterStateToUI();
|
||
|
||
// 自动选中导出下拉框中的对应图表
|
||
const exportSelect = document.getElementById('exportMatrixSelect');
|
||
if (exportSelect) {
|
||
exportSelect.value = index.toString();
|
||
}
|
||
|
||
// 显示提示
|
||
showInfo('已进入独占编辑模式，您的修改将保存到此图的配置中', 3000);
|
||
|
||
// *** 修复Bug: 等待热力图更新完成 ***
|
||
// 进入独占模式时只更新数据，不主动打开统计面板
|
||
await updateHeatmapFromGlobalState(false, false); // zOnly=false 因为进入独占模式需要更新坐标轴等
|
||
}
|
||
|
||
/**
|
||
* 退出独占模式
|
||
*/
|
||
function exitExclusiveMode() {
|
||
if (!globalUIState.exclusiveMode.active) return;
|
||
|
||
const editingIndex = globalUIState.exclusiveMode.editingIndex;
|
||
console.log(`[独占模式] 退出，保存图 ${editingIndex} 的配置`);
|
||
|
||
// 保存当前UI状态到图表配置
|
||
if (editingIndex !== null && allSimilarityResults[editingIndex]) {
|
||
const config = allSimilarityResults[editingIndex].visualConfig;
|
||
|
||
// 保存显示字段
|
||
config.displayFields.xField = globalUIState.displayFields.xField;
|
||
config.displayFields.yField = globalUIState.displayFields.yField;
|
||
|
||
// 保存筛选器
|
||
config.similarityRange = { ...globalUIState.filters.uiState.similarityRange };
|
||
config.filters.topK = { ...globalUIState.filters.uiState.topK };
|
||
|
||
// 保存排序
|
||
config.sorting.order = globalUIState.sorting.order;
|
||
|
||
console.log(`[独占模式] 已保存配置:`, config);
|
||
}
|
||
|
||
// 重置独占模式状态
|
||
globalUIState.exclusiveMode.active = false;
|
||
globalUIState.exclusiveMode.editingIndex = null;
|
||
|
||
matrixButtonStates.forEach(state => {
|
||
state.exclusive = false;
|
||
});
|
||
|
||
showSuccess('已保存配置并退出独占模式', 2000);
|
||
}
|
||
|
||
/**
|
||
* 应用筛选器状态到UI控件
|
||
*/
|
||
function applyFilterStateToUI() {
|
||
const range = globalUIState.filters.uiState.similarityRange;
|
||
const topK = globalUIState.filters.uiState.topK;
|
||
|
||
// 更新相似度范围
|
||
const minSlider = document.getElementById('minSimilaritySlider');
|
||
const maxSlider = document.getElementById('maxSimilaritySlider');
|
||
const minInput = document.getElementById('minSimilarityInput');
|
||
const maxInput = document.getElementById('maxSimilarityInput');
|
||
|
||
minSlider.value = range.min;
|
||
maxSlider.value = range.max;
|
||
minInput.value = range.min;
|
||
maxInput.value = range.max;
|
||
|
||
// 更新滑块轨道
|
||
const track = document.getElementById('similarityTrack');
|
||
const pos = calculateTrackPosition(range.min, range.max, minSlider);
|
||
track.style.left = pos.left + 'px';
|
||
track.style.width = pos.width + 'px';
|
||
|
||
// 更新Top-K
|
||
document.getElementById('topkSlider').value = topK.value;
|
||
currentTopkAxis = topK.axis;
|
||
updateTopkDisplay();
|
||
|
||
// 更新轴选择按钮
|
||
document.getElementById('xAxisBtn').classList.toggle('active', topK.axis === 'x');
|
||
document.getElementById('yAxisBtn').classList.toggle('active', topK.axis === 'y');
|
||
}
|
||
|
||
|
||
/**
|
||
* 更新显示字段选择器
|
||
*/
|
||
function updateDisplayFieldSelectorsFromGlobalState() {
|
||
const xFields = globalUIState.dataSource.xAvailableFields;
|
||
const yFields = globalUIState.dataSource.yAvailableFields;
|
||
|
||
// 显示控件（添加空值检查）
|
||
const displayFieldControls = document.getElementById('displayFieldControls');
|
||
const yDisplayFieldControls = document.getElementById('yDisplayFieldControls');
|
||
|
||
if (displayFieldControls) displayFieldControls.style.display = 'block';
|
||
if (yDisplayFieldControls) yDisplayFieldControls.style.display = 'block';
|
||
|
||
// 更新X轴选择器
|
||
const xSelect = document.getElementById('xDisplayField');
|
||
xSelect.innerHTML = '';
|
||
xFields.forEach(field => {
|
||
const option = new Option(
|
||
field === 'order_id' ? '顺序ID' : field,
|
||
field
|
||
);
|
||
xSelect.add(option);
|
||
});
|
||
xSelect.value = globalUIState.displayFields.xField;
|
||
|
||
// 更新Y轴选择器
|
||
const ySelect = document.getElementById('yDisplayField');
|
||
ySelect.innerHTML = '';
|
||
yFields.forEach(field => {
|
||
const option = new Option(
|
||
field === 'order_id' ? '顺序ID' : field,
|
||
field
|
||
);
|
||
ySelect.add(option);
|
||
});
|
||
ySelect.value = globalUIState.displayFields.yField;
|
||
}
|
||
|
||
// 新增：显示差值统计信息
|
||
function showDifferenceStatistics(activatePanel = true) {
|
||
const statsGrid = document.getElementById('statsGrid');
|
||
|
||
if (!statsGrid) {
|
||
console.warn('statsGrid元素不存在，统计信息面板可能未加载');
|
||
return;
|
||
}
|
||
|
||
// 获取被减数(ground truth)和减数的布尔矩阵
|
||
const primaryIndex = globalUIState.dataSource.primaryIndex;
|
||
const subtractIndex = globalUIState.dataSource.subtractIndex;
|
||
|
||
if (primaryIndex === null || subtractIndex === null) {
|
||
statsGrid.innerHTML = '<div style="padding: 10px; text-align: center; color: #999;">差值模式数据不完整</div>';
|
||
return;
|
||
}
|
||
|
||
// 获取被减数的最终遮罩(ground truth)
|
||
const primaryConfig = allSimilarityResults[primaryIndex].visualConfig;
|
||
const groundTruthMask = primaryConfig.cachedMasks?.finalMask || computeFinalMaskForMatrix(primaryIndex);
|
||
|
||
// 获取当前应用的最终布尔矩阵
|
||
let currentMask;
|
||
|
||
// 如果启用了临时筛选器,应用临时筛选器
|
||
const tempFilterMask = computeTemporaryFilterMask();
|
||
if (tempFilterMask) {
|
||
currentMask = tempFilterMask;
|
||
} else {
|
||
// 否则使用减数的最终遮罩
|
||
const subtractConfig = allSimilarityResults[subtractIndex].visualConfig;
|
||
currentMask = subtractConfig.cachedMasks?.finalMask || computeFinalMaskForMatrix(subtractIndex);
|
||
}
|
||
|
||
if (!groundTruthMask || !currentMask) {
|
||
statsGrid.innerHTML = '<div style="padding: 10px; text-align: center; color: #999;">无法计算统计数据</div>';
|
||
return;
|
||
}
|
||
|
||
// 计算差值模式统计信息
|
||
const stats = calculateDifferenceModeStatistics(groundTruthMask, currentMask);
|
||
|
||
// 构建HTML
|
||
let statsHTML = '';
|
||
|
||
// 1. True Positive
|
||
statsHTML += `
|
||
<div class="stat-item">
|
||
<div class="icon"><i class="bi bi-check-circle-fill text-success"></i></div>
|
||
<div class="label">True Positive</div>
|
||
<div class="value">${stats.truePositive}</div>
|
||
</div>
|
||
`;
|
||
|
||
// 2. True Negative
|
||
statsHTML += `
|
||
<div class="stat-item">
|
||
<div class="icon"><i class="bi bi-circle text-secondary"></i></div>
|
||
<div class="label">True Negative</div>
|
||
<div class="value">${stats.trueNegative}</div>
|
||
</div>
|
||
`;
|
||
|
||
// 3. False Positive
|
||
statsHTML += `
|
||
<div class="stat-item">
|
||
<div class="icon"><i class="bi bi-exclamation-circle-fill text-warning"></i></div>
|
||
<div class="label">False Positive</div>
|
||
<div class="value">${stats.falsePositive}</div>
|
||
</div>
|
||
`;
|
||
|
||
// 4. False Negative
|
||
statsHTML += `
|
||
<div class="stat-item">
|
||
<div class="icon"><i class="bi bi-x-circle-fill text-danger"></i></div>
|
||
<div class="label">False Negative</div>
|
||
<div class="value">${stats.falseNegative}</div>
|
||
</div>
|
||
`;
|
||
|
||
// 5. 上下文召回率
|
||
statsHTML += `
|
||
<div class="stat-item">
|
||
<div class="icon"><i class="bi bi-arrow-left-circle-fill"></i></div>
|
||
<div class="label">上下文召回率</div>
|
||
<div class="value">${(stats.contextRecall * 100).toFixed(2)}%</div>
|
||
</div>
|
||
`;
|
||
|
||
// 6. 上下文精度
|
||
statsHTML += `
|
||
<div class="stat-item">
|
||
<div class="icon"><i class="bi bi-crosshair2"></i></div>
|
||
<div class="label">上下文精度</div>
|
||
<div class="value">${(stats.contextPrecision * 100).toFixed(2)}%</div>
|
||
</div>
|
||
`;
|
||
|
||
statsGrid.innerHTML = statsHTML;
|
||
|
||
if (activatePanel) {
|
||
// 激活统计信息按钮（使用新架构）
|
||
const statisticsBtn = document.querySelector('[data-side="right"][data-position="top"][data-panel="statistics"]');
|
||
if (statisticsBtn && !statisticsBtn.classList.contains('active')) {
|
||
// 取消同位置其他按钮的激活状态
|
||
if (activeButtons.right.top && activeButtons.right.top !== statisticsBtn) {
|
||
activeButtons.right.top.classList.remove('active');
|
||
}
|
||
statisticsBtn.classList.add('active');
|
||
activeButtons.right.top = statisticsBtn;
|
||
|
||
// 关键：调用 updateSidebarContent 来移动面板
|
||
updateSidebarContent('right', 'top', 'statistics');
|
||
}
|
||
|
||
// 激活筛选器控制按钮（使用新架构）
|
||
const filtersBtn = document.querySelector('[data-side="right"][data-position="bottom"][data-panel="filters"]');
|
||
if (filtersBtn && !filtersBtn.classList.contains('active')) {
|
||
// 取消同位置其他按钮的激活状态
|
||
if (activeButtons.right.bottom && activeButtons.right.bottom !== filtersBtn) {
|
||
activeButtons.right.bottom.classList.remove('active');
|
||
}
|
||
filtersBtn.classList.add('active');
|
||
activeButtons.right.bottom = filtersBtn;
|
||
|
||
// 关键：调用 updateSidebarContent 来移动面板
|
||
updateSidebarContent('right', 'bottom', 'filters');
|
||
}
|
||
|
||
// 更新右侧边栏状态（打开侧边栏）
|
||
updateSidebarState('right');
|
||
}
|
||
}
|
||
|
||
|
||
|
||
/**
|
||
* 从全局状态更新热力图
|
||
* @param {boolean} activatePanel - 是否激活面板
|
||
* @param {boolean} zOnly - 是否只更新z矩阵（用于筛选器变化），false时更新全部（用于显示字段切换等）
|
||
*/
|
||
async function updateHeatmapFromGlobalState(activatePanel = true, zOnly = true) {
|
||
if (!globalUIState.dataSource.currentMatrix) {
|
||
console.log('[热力图] 没有数据源，跳过更新');
|
||
return;
|
||
}
|
||
|
||
console.log('[热力图] 从全局状态更新');
|
||
|
||
// 使用全局状态的数据
|
||
filteredMatrix = globalUIState.dataSource.currentMatrix;
|
||
currentXData = globalUIState.dataSource.currentXData;
|
||
currentYData = globalUIState.dataSource.currentYData;
|
||
currentXLabels = globalUIState.dataSource.currentXLabels;
|
||
currentYLabels = globalUIState.dataSource.currentYLabels;
|
||
xAvailableFields = globalUIState.dataSource.xAvailableFields;
|
||
yAvailableFields = globalUIState.dataSource.yAvailableFields;
|
||
|
||
// 更新相似度滑块范围（差值模式需要 -1 到 1）
|
||
updateSimilaritySliderRangeForGlobalState();
|
||
|
||
// 切换图表时更新Top-K滑块最大值
|
||
if (!zOnly) {
|
||
updateTopkSliderMax();
|
||
}
|
||
|
||
// *** 修复Bug1: 先显示统计信息和激活右侧栏，再绘制热力图 ***
|
||
if (globalUIState.dataSource.primaryIndex !== null) {
|
||
if (globalUIState.dataSource.subtractIndex !== null) {
|
||
showDifferenceStatistics(activatePanel);
|
||
} else {
|
||
showStatistics(activatePanel);
|
||
}
|
||
}
|
||
|
||
// 等待DOM更新完成（右侧栏动画完成）
|
||
await new Promise(resolve => setTimeout(resolve, 50));
|
||
|
||
// 创建或更新热力图（此时容器大小已经是正确的）
|
||
const isFirstTimeCreating = document.getElementById('heatmap').innerHTML === '';
|
||
if (isFirstTimeCreating) {
|
||
createHeatmap();
|
||
// *** 修复Bug: 首次创建热力图后，立即调用updateHeatmap以应用筛选器 ***
|
||
// createHeatmap()只是绘制完整图形，筛选器需要通过updateHeatmap()应用
|
||
console.log('[热力图] 首次创建完成，立即应用筛选器');
|
||
updateHeatmap(zOnly);
|
||
} else {
|
||
updateHeatmap(zOnly);
|
||
}
|
||
|
||
// 显示操作区域 - 面板会在showStatistics中自动打开
|
||
// 不需要显式控制section的display，因为它们在面板内部
|
||
}
|
||
|
||
/**
|
||
* 更新相似度滑块范围（根据是否差值模式）
|
||
*/
|
||
function updateSimilaritySliderRangeForGlobalState() {
|
||
const isDiff = globalUIState.dataSource.subtractIndex !== null;
|
||
const range = isDiff ? { min: -1, max: 1 } : { min: 0, max: 1 };
|
||
|
||
const minSlider = document.getElementById('minSimilaritySlider');
|
||
const maxSlider = document.getElementById('maxSimilaritySlider');
|
||
const minInput = document.getElementById('minSimilarityInput');
|
||
const maxInput = document.getElementById('maxSimilarityInput');
|
||
|
||
minSlider.min = range.min;
|
||
minSlider.max = range.max;
|
||
maxSlider.min = range.min;
|
||
maxSlider.max = range.max;
|
||
minInput.min = range.min;
|
||
minInput.max = range.max;
|
||
maxInput.min = range.min;
|
||
maxInput.max = range.max;
|
||
}
|
||
|
||
/**
|
||
* 检查是否为差值模式
|
||
*/
|
||
function isInDifferenceMode() {
|
||
return globalUIState.dataSource.subtractIndex !== null;
|
||
}
|
||
|
||
/**
|
||
* 更新图表列表UI（新架构：竖排列表 + 三按钮）
|
||
*/
|
||
function updateMatrixListUI() {
|
||
const container = document.getElementById('matrixButtonTable');
|
||
if (!container) return;
|
||
|
||
// 清空现有内容
|
||
container.innerHTML = '';
|
||
|
||
// 生成竖排列表
|
||
allSimilarityResults.forEach((result, index) => {
|
||
const state = matrixButtonStates[index];
|
||
|
||
// 创建行容器
|
||
const row = document.createElement('div');
|
||
row.className = 'matrix-list-item';
|
||
row.dataset.index = index;
|
||
|
||
// 确定边框颜色和状态图标
|
||
let borderClass = '';
|
||
let badgeIcon;
|
||
let badgeClass;
|
||
|
||
if (state.exclusive) {
|
||
// 独占模式 - 紫色边框 + 准星角标
|
||
borderClass = 'border-exclusive';
|
||
badgeIcon = 'bi-crosshair';
|
||
badgeClass = 'badge-crosshair';
|
||
} else if (globalUIState.dataSource.primaryIndex === index && globalUIState.dataSource.subtractIndex === null) {
|
||
// 主数据源 - 绿色边框 + 实心圆圈角标
|
||
borderClass = 'border-primary2';
|
||
badgeIcon = 'bi-circle-fill';
|
||
badgeClass = 'badge-circle';
|
||
} else if (globalUIState.dataSource.primaryIndex === index && globalUIState.dataSource.subtractIndex !== null) {
|
||
// 被减数 - 绿色边框 + 实心加号角标
|
||
borderClass = 'border-primary2';
|
||
badgeIcon = 'bi-plus-circle-fill';
|
||
badgeClass = 'badge-plus';
|
||
} else if (globalUIState.dataSource.subtractIndex === index) {
|
||
// 减数 - 红色边框 + 实心减号角标
|
||
borderClass = 'border-subtract';
|
||
badgeIcon = 'bi-dash-circle-fill';
|
||
badgeClass = 'badge-minus';
|
||
} else {
|
||
// 无状态 - 默认边框 + 灰色方形角标
|
||
badgeIcon = 'bi-bookmark';
|
||
badgeClass = 'badge-none';
|
||
}
|
||
|
||
if (borderClass) row.classList.add(borderClass);
|
||
|
||
// 创建header容器(包含状态图标、标题和按钮)
|
||
const header = document.createElement('div');
|
||
header.className = 'matrix-item-header';
|
||
|
||
// 左侧容器(状态图标 + 标题)
|
||
const leftContainer = document.createElement('div');
|
||
leftContainer.className = 'matrix-item-left';
|
||
|
||
// 状态图标
|
||
const badge = document.createElement('i');
|
||
badge.className = `matrix-item-badge ${badgeClass} ${badgeIcon}`;
|
||
leftContainer.appendChild(badge);
|
||
|
||
// 图表标题 - 三行结构
|
||
const title = document.createElement('div');
|
||
title.className = 'matrix-item-title';
|
||
|
||
const xName = document.createElement('div');
|
||
xName.className = 'collection-name';
|
||
xName.textContent = truncateCollectionName(result.xCollection, 20);
|
||
xName.title = result.xCollection; // 完整名称作为tooltip
|
||
|
||
const vsText = document.createElement('div');
|
||
vsText.className = 'vs-text';
|
||
vsText.textContent = 'vs';
|
||
|
||
const yName = document.createElement('div');
|
||
yName.className = 'collection-name';
|
||
yName.textContent = truncateCollectionName(result.yCollection, 20);
|
||
yName.title = result.yCollection; // 完整名称作为tooltip
|
||
|
||
title.appendChild(xName);
|
||
title.appendChild(vsText);
|
||
title.appendChild(yName);
|
||
|
||
leftContainer.appendChild(title);
|
||
|
||
// 按钮容器
|
||
const buttonsContainer = document.createElement('div');
|
||
buttonsContainer.className = 'matrix-item-buttons';
|
||
|
||
// 按钮1：应用数据 - 实心眼睛图标
|
||
const dataBtn = document.createElement('button');
|
||
dataBtn.className = 'matrix-control-btn btn-apply-data';
|
||
dataBtn.innerHTML = '<i class="bi-eye-fill"></i>';
|
||
dataBtn.title = '应用数据';
|
||
if (state.applyData) dataBtn.classList.add('active');
|
||
dataBtn.onclick = () => toggleApplyDataButton(index);
|
||
|
||
// 按钮2：应用筛选器 - 筛选图标
|
||
const filterBtn = document.createElement('button');
|
||
filterBtn.className = 'matrix-control-btn btn-apply-filter';
|
||
filterBtn.innerHTML = '<i class="bi-funnel-fill"></i>';
|
||
filterBtn.title = '应用筛选器';
|
||
if (state.applyFilter) filterBtn.classList.add('active');
|
||
filterBtn.onclick = () => toggleApplyFilterButton(index);
|
||
|
||
// 按钮3：独占模式 - 准星图标
|
||
const exclusiveBtn = document.createElement('button');
|
||
exclusiveBtn.className = 'matrix-control-btn btn-exclusive';
|
||
exclusiveBtn.innerHTML = '<i class="bi-crosshair"></i>';
|
||
exclusiveBtn.title = '独占模式';
|
||
if (state.exclusive) exclusiveBtn.classList.add('active');
|
||
exclusiveBtn.onclick = () => toggleExclusiveModeButton(index);
|
||
|
||
// 组装
|
||
buttonsContainer.appendChild(dataBtn);
|
||
buttonsContainer.appendChild(filterBtn);
|
||
buttonsContainer.appendChild(exclusiveBtn);
|
||
|
||
header.appendChild(leftContainer);
|
||
header.appendChild(buttonsContainer);
|
||
|
||
row.appendChild(header);
|
||
container.appendChild(row);
|
||
});
|
||
}
|
||
|
||
/**
|
||
* 更新导出图表选择器
|
||
*/
|
||
function updateExportMatrixSelector() {
|
||
const select = document.getElementById('exportMatrixSelect');
|
||
if (!select) return;
|
||
|
||
// 清空现有选项
|
||
select.innerHTML = '';
|
||
|
||
if (!allSimilarityResults || allSimilarityResults.length === 0) {
|
||
const option = document.createElement('option');
|
||
option.value = '';
|
||
option.textContent = '请先计算相似度';
|
||
select.appendChild(option);
|
||
return;
|
||
}
|
||
|
||
// 为每个图表添加选项
|
||
allSimilarityResults.forEach((result, index) => {
|
||
const option = document.createElement('option');
|
||
option.value = index;
|
||
option.textContent = `图 ${index + 1}: ${result.xCollection} vs ${result.yCollection}`;
|
||
select.appendChild(option);
|
||
});
|
||
|
||
// 默认选中第一个
|
||
if (allSimilarityResults.length > 0) {
|
||
select.value = '0';
|
||
}
|
||
}
|
||
|
||
// 页面加载时初始化
|
||
// 注意: 大部分控件初始化已经移到rebindEventHandlers中,在侧边栏内容加载时才执行
|
||
document.addEventListener('DOMContentLoaded', function () {
|
||
// 仅初始化全局控件(不在侧边栏中的)
|
||
initColorSchemeSelector();
|
||
|
||
// 注意: 以下初始化已移到rebindEventHandlers中:
|
||
// - initRangeSlider() -> 在'filters'面板加载时
|
||
// - initTopkSlider() -> 在'filters'面板加载时
|
||
// - initSortSelector() -> 在'chartControl'面板加载时
|
||
// - initDisplayFieldSelectors() -> 在'chartControl'面板加载时
|
||
// - loadCollections() -> 在'dataSource'面板加载时
|
||
});
|