Meta: Simplify GC heap explorer's class list rendering
We don't need to pass the filter and sort to the render function from all these locations, the callers always use values from the same inputs. Instead, just use the values directly from cached references the input elements. This fixes the class filter not being applied correctly after a refresh autofills the old value back into it.
This commit is contained in:
parent
a3922aa570
commit
07d1b222c7
1 changed files with 15 additions and 18 deletions
|
|
@ -1279,6 +1279,9 @@
|
||||||
const mainApp = document.getElementById('main-app');
|
const mainApp = document.getElementById('main-app');
|
||||||
const fileInput = document.getElementById('file-input');
|
const fileInput = document.getElementById('file-input');
|
||||||
const loading = document.getElementById('loading');
|
const loading = document.getElementById('loading');
|
||||||
|
const classSearchInput = document.getElementById('class-search');
|
||||||
|
const rootSearchInput = document.getElementById('root-search');
|
||||||
|
let currentFilterButton = document.querySelector('.filter-btn.active');
|
||||||
|
|
||||||
// File handling
|
// File handling
|
||||||
dropZone.addEventListener('dragover', (e) => {
|
dropZone.addEventListener('dragover', (e) => {
|
||||||
|
|
@ -1386,7 +1389,9 @@
|
||||||
initGraph();
|
initGraph();
|
||||||
}
|
}
|
||||||
|
|
||||||
function renderClassList(filter = '', sortBy = 'count') {
|
function renderClassList() {
|
||||||
|
const filter = classSearchInput.value;
|
||||||
|
const sortBy = currentFilterButton.dataset.sort;
|
||||||
const list = document.getElementById('class-list');
|
const list = document.getElementById('class-list');
|
||||||
const maxCount = Math.max(...Object.values(classStats).map(s => s.count));
|
const maxCount = Math.max(...Object.values(classStats).map(s => s.count));
|
||||||
|
|
||||||
|
|
@ -1420,7 +1425,8 @@
|
||||||
`).join('');
|
`).join('');
|
||||||
}
|
}
|
||||||
|
|
||||||
function renderRootList(filter = '') {
|
function renderRootList() {
|
||||||
|
const filter = rootSearchInput.value;
|
||||||
const list = document.getElementById('root-list');
|
const list = document.getElementById('root-list');
|
||||||
|
|
||||||
// Group roots by type
|
// Group roots by type
|
||||||
|
|
@ -1481,31 +1487,22 @@
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
document.getElementById('class-search').addEventListener('input', (e) => {
|
classSearchInput.addEventListener('input', renderClassList);
|
||||||
renderClassList(e.target.value, getCurrentSort());
|
rootSearchInput.addEventListener('input', renderRootList);
|
||||||
});
|
|
||||||
|
|
||||||
document.getElementById('root-search').addEventListener('input', (e) => {
|
|
||||||
renderRootList(e.target.value);
|
|
||||||
});
|
|
||||||
|
|
||||||
document.querySelectorAll('.filter-btn').forEach(btn => {
|
document.querySelectorAll('.filter-btn').forEach(btn => {
|
||||||
btn.addEventListener('click', () => {
|
btn.addEventListener('click', () => {
|
||||||
document.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active'));
|
currentFilterButton.classList.remove('active');
|
||||||
btn.classList.add('active');
|
btn.classList.add('active');
|
||||||
renderClassList(document.getElementById('class-search').value, btn.dataset.sort);
|
currentFilterButton = btn;
|
||||||
|
renderClassList();
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
function getCurrentSort() {
|
|
||||||
const active = document.querySelector('.filter-btn.active');
|
|
||||||
return active ? active.dataset.sort : 'count';
|
|
||||||
}
|
|
||||||
|
|
||||||
function selectClass(className) {
|
function selectClass(className) {
|
||||||
selectedClass = className;
|
selectedClass = className;
|
||||||
renderClassList(document.getElementById('class-search').value, getCurrentSort());
|
renderClassList();
|
||||||
visualizeClass(className);
|
visualizeClass(className);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1983,7 +1980,7 @@
|
||||||
// Also select the class to show it in the graph
|
// Also select the class to show it in the graph
|
||||||
const className = heapData[decimalAddr].class_name;
|
const className = heapData[decimalAddr].class_name;
|
||||||
selectedClass = className;
|
selectedClass = className;
|
||||||
renderClassList(document.getElementById('class-search').value, getCurrentSort());
|
renderClassList();
|
||||||
visualizeClass(className);
|
visualizeClass(className);
|
||||||
} else {
|
} else {
|
||||||
alert('Address not found in heap dump');
|
alert('Address not found in heap dump');
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue