Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Graph based Visual Explain #353

Draft
wants to merge 3 commits into
base: main
Choose a base branch
from
Draft

Graph based Visual Explain #353

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
501c16f
Initial work for graphs
worksofliam Mar 16, 2025
1bf06b0
Click on node to show detail
worksofliam Mar 16, 2025
d81df59
Remove legacy view
worksofliam Mar 16, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 0 additions & 15 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -496,12 +496,6 @@
"category": "Db2 for i",
"icon": "$(gear)"
},
{
"command": "vscode-db2i.dove.export",
"title": "Export current VE data",
"category": "Db2 for i",
"icon": "$(file)"
},
{
"command": "vscode-db2i.dove.node.copy",
"title": "Copy value",
Expand Down Expand Up @@ -735,10 +729,6 @@
"command": "vscode-db2i.dove.editSettings",
"when": "vscode-db2i:explaining == true"
},
{
"command": "vscode-db2i.dove.export",
"when": "vscode-db2i:explaining == true"
},
{
"command": "vscode-db2i.dove.node.copy",
"when": "never"
Expand Down Expand Up @@ -835,11 +825,6 @@
"group": "navigation@1",
"when": "view == vscode-db2i.dove.nodes"
},
{
"command": "vscode-db2i.dove.export",
"group": "navigation@2",
"when": "view == vscode-db2i.dove.nodes"
},
{
"command": "vscode-db2i.dove.close",
"group": "navigation@3",
Expand Down
160 changes: 160 additions & 0 deletions src/views/cytoscape/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,160 @@
import { ViewColumn, window } from "vscode";

type Styles = {[key: string]: string};

export interface Element {
data: {id: string, label: string},
style: Styles
}

export interface Edge {
data: {id: string, source: string, target: string}
}

interface NewNode {
label: string,
styles?: Styles,
parent?: string,
data?: any;
}

const randomId = () => Math.random().toString(36).substring(7);

export class CytoscapeGraph {
private elementData = new Map<string, any>();
private elements: Element[] = [];
private edges: Edge[] = [];

constructor() {}

addNode(node: NewNode): string {
const id = randomId(); // TODO: is this unique enough?

if (node.data) {
this.elementData.set(id, node.data);
}

this.elements.push({
data: {id, label: node.label},
style: node.styles || {}
});

if (node.parent) {
this.edges.push({
data: {id: randomId(), source: node.parent, target: id}
});
}

return id;
}

createView(title: string, onNodeSelected: (data: unknown) => void): any {
const webview = window.createWebviewPanel(`c`, title, {viewColumn: ViewColumn.One}, {enableScripts: true, retainContextWhenHidden: true});
webview.webview.html = this.getHtml();

webview.webview.onDidReceiveMessage((message) => {
if (message.command === 'selected') {
const data = this.elementData.get(message.nodeId);
onNodeSelected(data);
}
}, undefined, []);

return webview;
}

private getHtml(): string {
return /*html*/`
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.23.0/cytoscape.min.js"></script>
<style>
/* html,
body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
overflow: hidden;
} */

.diagram-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
margin: 0;
}
</style>
</head>

<body>
<div class="diagram-container" id="diagramContainer"></div>

<script>
const vscode = acquireVsCodeApi();
document.addEventListener("DOMContentLoaded", function () {
// Initialize Cytoscape
const cy = cytoscape({
container: document.getElementById('diagramContainer'),

elements: ${JSON.stringify([...this.elements, ...this.edges])},

style: [
{
selector: 'node',
style: {
'width': '120px',
'height': '60px',
'background-color': 'var(--vscode-list-activeSelectionBackground)',
'color': 'var(--vscode-list-activeSelectionForeground)',
'label': 'data(label)',
'text-valign': 'center',
'text-halign': 'center',
'font-size': '14px',
'text-wrap': 'wrap',
'text-max-width': '100px'
}
},
{
selector: 'edge',
style: {
'width': 2,
'line-color': '#5c96bc',
'target-arrow-color': '#5c96bc',
'target-arrow-shape': 'triangle',
'curve-style': 'bezier'
}
}
],

// Layout options
layout: {
name: 'breadthfirst',
directed: true, // Directional tree
padding: 10, // Padding around the graph
spacingFactor: 1.5 // Spacing between nodes
}
});

// Add click event to show alert for nodes
cy.on('tap', 'node', function (evt) {
const id = evt.target.id();
vscode.postMessage({
command: 'selected',
nodeId: id
});
});
});
</script>
</body>

</html>
`;
}
}
15 changes: 0 additions & 15 deletions src/views/results/explain/contributes.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -106,12 +106,6 @@
"category": "Db2 for i",
"icon": "$(gear)"
},
{
"command": "vscode-db2i.dove.export",
"title": "Export current VE data",
"category": "Db2 for i",
"icon": "$(file)"
},
{
"command": "vscode-db2i.dove.node.copy",
"title": "Copy value",
Expand All @@ -133,10 +127,6 @@
"command": "vscode-db2i.dove.editSettings",
"when": "vscode-db2i:explaining == true"
},
{
"command": "vscode-db2i.dove.export",
"when": "vscode-db2i:explaining == true"
},
{
"command": "vscode-db2i.dove.node.copy",
"when": "never"
Expand All @@ -153,11 +143,6 @@
"group": "navigation@1",
"when": "view == vscode-db2i.dove.nodes"
},
{
"command": "vscode-db2i.dove.export",
"group": "navigation@2",
"when": "view == vscode-db2i.dove.nodes"
},
{
"command": "vscode-db2i.dove.close",
"group": "navigation@3",
Expand Down
143 changes: 0 additions & 143 deletions src/views/results/explain/doveResultsView.ts
View file
Open in desktop

This file was deleted.

Loading
Loading