How to debug EFCore.Visualizer extension? #34
Replies: 1 comment 6 replies
-
|
You should be able to debug it with F5 out of the box. Check this for more details: Debug a Visual Studio extension As for Oracle and other databases can you share how you plan to implement rendering of the query plan? I also planned to add support for other databases using the treeflex library. For example, DuckDB uses it to implement rendering plans with HTML: |
Beta Was this translation helpful? Give feedback.
-
|
I checked this library and created some rough solution for now and it looks like following |
Beta Was this translation helpful? Give feedback.
-
|
Looks nice. Can you collapse/expand them when clicked? |
Beta Was this translation helpful? Give feedback.
-
|
Can you also test |
Beta Was this translation helpful? Give feedback.
-
As oracle plan can have many columns, Important things are showed at top, when you click it gives detail info - as of now tree itself is not expandable and collapsable- but trying to make them also write now all text doesn't look good, will apply some theme to demo cpu, time bytes etc. <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Oracle Execution Plan Interactive Tree</title>
<link rel="stylesheet" href="https://unpkg.com/treeflex/dist/css/treeflex.css">
<style>
body {
font-family: Arial, sans-serif;
}
.tf-tree {
margin-left: 20px;
font-size: 14px;
}
.tf-nc {
padding: 10px;
background-color: #f4f4f4;
border-radius: 5px;
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
cursor: pointer;
transition: background-color 0.3s ease;
}
.tf-nc:hover {
background-color: #eaeaea;
}
.details {
display: none;
margin-top: 10px;
font-size: 12px;
color: #555;
}
.details.visible {
display: block;
}
.execution-plan-container {
max-width: 800px;
margin: 20px auto;
}
.tf-nc .summary {
font-weight: bold;
}
</style>
</head>
<body>
<div class="execution-plan-container">
<div id="execution-plan-tree" class="tf-tree tf-gap-lg"></div>
</div>
<script>
const executionPlan = `
-------------------------------------------------------------------------------
| Id | Operation | Name |Rows | Bytes |Cost (%CPU)| Time |
-------------------------------------------------------------------------------
| 0 | SELECT STATEMENT | | 4 | 124 | 5 (20)| 00:00:01 |
| 1 | SORT ORDER BY | | 4 | 124 | 5 (20)| 00:00:01 |
|* 2 | HASH JOIN | | 4 | 124 | 4 (0)| 00:00:01 |
|* 3 | TABLE ACCESS FULL| EMPLOYEES | 4 | 60 | 2 (0)| 00:00:01 |
| 4 | TABLE ACCESS FULL| DEPARTMENTS | 27 | 432 | 2 (0)| 00:00:01 |
-------------------------------------------------------------------------------`;
function createTree(plan) {
const lines = plan.trim().split('\n').filter(line => line.includes('|'));
const tree = [];
const stack = [];
lines.forEach(line => {
const parts = line.split('|').map(part => part.trim());
const id = parts[1];
const operation = parts[2];
const name = parts[3] || '';
const rows = parts[4] || '';
const bytes = parts[5] || '';
const cost = parts[6] || '';
const time = parts[7] || '';
const node = {
id: id,
operation: operation,
name: name,
rows: rows,
bytes: bytes,
cost: cost,
time: time,
children: []
};
const spacesBeforeOperation = line.indexOf(operation.trim());
if (stack.length === 0) {
stack.push({ node, spacesBeforeOperation });
tree.push(node);
} else {
while (stack.length > 0 && stack[stack.length - 1].spacesBeforeOperation >= spacesBeforeOperation) {
stack.pop();
}
if (stack.length > 0) {
const parent = stack[stack.length - 1].node;
parent.children.push(node);
} else {
tree.push(node);
}
stack.push({ node, spacesBeforeOperation });
}
});
return tree;
}
function buildHTMLTree(tree) {
let html = "<ul>";
tree.forEach(node => {
html += `
<li>
<span class="tf-nc" onclick="toggleDetails(this)">
<div class="summary">
${node.operation} (${node.name ? node.name + ', ' : ''}${node.rows} rows, ${node.cost} cost, ${node.time} time)
</div>
<div class="details">
<p><strong>Id:</strong> ${node.id}</p>
<p><strong>Operation:</strong> ${node.operation}</p>
${node.name ? `<p><strong>Name:</strong> ${node.name}</p>` : ''}
<p><strong>Rows:</strong> ${node.rows}</p>
<p><strong>Bytes:</strong> ${node.bytes}</p>
<p><strong>Cost:</strong> ${node.cost}</p>
<p><strong>Time:</strong> ${node.time}</p>
</div>
</span>
`;
if (node.children.length > 0) {
html += buildHTMLTree(node.children);
}
html += "</li>";
});
html += "</ul>";
return html;
}
function toggleDetails(element) {
const details = element.querySelector('.details');
if (details) {
details.classList.toggle('visible');
}
}
const tree = createTree(executionPlan);
document.getElementById('execution-plan-tree').innerHTML = buildHTMLTree(tree);
</script>
</body>
</html>My js code do define the hierarchy but its not tested on many complex queries. We can also use a popular Oracle script which I use many time to display order of execution in larger queries - then build a tree with it. this is my first UI building ever...so learning stuff on the way :) |
Beta Was this translation helpful? Give feedback.
-
I already tested this - HTML thing just give you above table in HTML, instead of ASCII character I was never able to get 'ACTIVE' working, because asks you to download the script from a site and browser doesn't allow that, even when i copy pasted it complained about some element is null - Will do some more research on them Following are the queries to test them |
Beta Was this translation helpful? Give feedback.
-
I have developed few extensions in past in which I press F5 which opens experimental version of VS which have our extension installed and we can debug
For this extension I added following properties to start the experimental version but it did not install the EfCore.Visualizer extension. As of now to debug I install by vsix from debug folder and then attach the debugging vsix to my instance - which is really painful process when you have to make frequent changes.
I am trying enhance it for Oracle which can eventually be used for mysql as well as both have similar tree structure query plans.
Beta Was this translation helpful? Give feedback.
All reactions