Skip to content

Restore d3viz/html/template.html #1380

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

Merged
merged 1 commit into from
Apr 27, 2025
+101 −0
Merged

Restore d3viz/html/template.html #1380

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
101 changes: 101 additions & 0 deletions pytensor/d3viz/html/template.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,101 @@
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="%% CSS_DIR %%/d3viz.css"/>
<link rel="stylesheet" href="%% CSS_DIR %%/d3-context-menu.css"/>
<script type="text/javascript" src="%% JS_DIR %%/d3viz.js"></script>
<script type="text/javascript" src="%% JS_DIR %%/d3.v3.min.js"></script>
<script type="text/javascript" src="%% JS_DIR %%/dagre-d3.min.js"></script>
<script type="text/javascript" src="%% JS_DIR %%/graphlib-dot.min.js"></script>
<script type="text/javascript" src="%% JS_DIR %%/d3-context-menu.js"></script>
</head>
<body>
<div id='menu' class='menuBar'>
<input name="resetNodes"
type="button"
value="Reset nodes"
onclick="resetNodes()"/>
<input name="releaseNodes"
type="button"
value="Release nodes"
onclick="releaseNodes()"/>
</div>

<script type="text/javascript">
// Backend graph in DOT format
var dotGraph = graphlibDot.read(%% DOT_GRAPH %%);
// Frontend graph for visualization
var graph = {};

var forceLayout;
var isProfiled = false; // true if profiling information available
var useProfileColors = false;
var fixOnInit = true; // fix nodes on initialization
var maxProfilePer = 0;
var profileColors = ["#fff5f0","#fee0d2","#fcbba1","#fc9272","#fb6a4a","#ef3b2c","#cb181d","#a50f15"];
var pad = 10;
var isEditNode = false; // true if node is edited
var menuItems = [
{
title: 'Edit',
action: function(elm, d, i) { editNode(elm, d); }
},
{
title: 'Release',
action: function(elm, d, i) { releaseNode(d); }
}
];

// Create main panel
d3.select('body').select('svg').remove();
var svg = d3.select('body').append('svg')
.attr('width', '100%')
.attr('height', '95%');
var pane = svg.append('g');

// Zoom behaviour
var zoom = d3.behavior.zoom()
.scaleExtent([0.2, 8])
.on('zoom', function(d) {
var trans = d3.event.translate;
trans[0] += 300;
trans[1] += 100;
pane.attr('transform', 'translate(' + trans + ') scale(' + d3.event.scale + ')');
});
svg.call(zoom);
zoom.event(svg);
svg.on("dblclick.zoom", null);

// Edges
var edgeDiv = d3.select('body').append('div')
.attr('class', 'edgeTooltip')
.style('opacity', 0.0);

// Div for node details
var nodeInfo = d3.select('body').append('div')
.attr('class', 'nodeInfo')
.style('opacity', 0.0);

// Definition head of edges
var markerData = [
{'id': 'n', 'color': 'black'},
{'id': 'r', 'color': 'red'},
{'id': 'b', 'color': 'dodgerblue'}];
svg.append("defs").selectAll('marker').data(markerData).enter().append("marker")
.attr("id", function(d) { return 'edgeArrow_' + d.id;})
.attr("markerWidth", 4)
.attr("markerHeight", 4)
.attr("refX", 2)
.attr("refY", 2)
.attr("orient", "auto")
.append("path")
.attr("d", "M0,0 L4,2 L0,4 Z")
.attr('fill', function(d) { return d.color;});

// Initialize graph
processDotGraph(dotGraph);
graph = frontEndGraph(dotGraph);
drawGraph();
</script>
</body>
</html>