Replies: 1 comment
-
|
FYI, here is an example of the HTML produced. The API seems to be doing exactly what I need it. It is the docs frontend that needs some configuring to be the useful API helper I intend it to be. Response headers: Click here to view full HTML
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.16.1/vis.css" type="text/css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.16.1/vis-network.min.js"> </script>
<center>
<h1></h1>
</center>
<!-- <link rel="stylesheet" href="../node_modules/vis/dist/vis.min.css" type="text/css" />
<script type="text/javascript" src="../node_modules/vis/dist/vis.js"> </script>-->
<style type="text/css">
#mynetwork {
width: 500px;
height: 500px;
background-color: #ffffff;
border: 1px solid lightgray;
position: relative;
float: left;
}
#config {
float: left;
width: 400px;
height: 600px;
}
</style>
</head>
<body>
<div id = "mynetwork"></div>
<div id = "config"></div>
<script type="text/javascript">
// initialize global variables.
var edges;
var nodes;
var network;
var container;
var options, data;
// This method is responsible for drawing the graph, returns the drawn network
function drawGraph() {
var container = document.getElementById('mynetwork');
// parsing and collecting nodes and edges from the python
nodes = new vis.DataSet([{"id": "A", "label": "A", "shape": "dot"}, {"id": "B", "label": "B", "shape": "dot"}, {"id": "C", "label": "C", "shape": "dot"}, {"id": "D", "label": "D", "shape": "dot"}, {"id": "E", "label": "E", "shape": "dot"}]);
edges = new vis.DataSet([{"arrows": "to", "from": "A", "to": "B", "width": 5.0}, {"arrows": "to", "from": "B", "to": "C", "width": 4.0}, {"arrows": "to", "from": "C", "to": "D", "width": 8.0}, {"arrows": "to", "from": "D", "to": "C", "width": 8.0}, {"arrows": "to", "from": "D", "to": "E", "width": 6.0}, {"arrows": "to", "from": "A", "to": "D", "width": 5.0}, {"arrows": "to", "from": "C", "to": "E", "width": 2.0}, {"arrows": "to", "from": "E", "to": "B", "width": 3.0}, {"arrows": "to", "from": "A", "to": "E", "width": 7.0}]);
// adding nodes and edges to the graph
data = {nodes: nodes, edges: edges};
var options = {
"configure": {
"enabled": true
},
"edges": {
"color": {
"inherit": true
},
"smooth": {
"enabled": false,
"type": "continuous"
}
},
"interaction": {
"dragNodes": true,
"hideEdgesOnDrag": false,
"hideNodesOnDrag": false
},
"physics": {
"enabled": true,
"stabilization": {
"enabled": true,
"fit": true,
"iterations": 1000,
"onlyDynamicEdges": false,
"updateInterval": 50
}
}
};
// if this network requires displaying the configure window,
// put it in its div
options.configure["container"] = document.getElementById("config");
network = new vis.Network(container, data, options);
return network;
}
drawGraph();
</script>
</body>
</html> |
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Uh oh!
There was an error while loading. Please reload this page.
-
My basic FastAPI endpoint looks like this:
But in the front end ('/docs') it offers a download of response-{...}.txt
How do I tell swagger UI to honour the Media type, which is set to
text/html? As a bonus it would be great if I could offer a link that opens the produced html in a new tab. Is this possible?i.e. there would be 3 buttons:
Beta Was this translation helpful? Give feedback.
All reactions