Skip to content
Snippets Groups Projects
Commit 3644d85a authored by tuhe's avatar tuhe
Browse files

Slight more work on knowledgemap and cytoscape js conversion

parent e2ea4b32
No related branches found
No related tags found
No related merge requests found
Expand all Show whitespace changes
Inline Side-by-side
dev/dkbn2/dkbn2/templates/kmap/kmap_base2.html
+ 179
− 1
View file @ 3644d85a
<script src="cytoscape.min.js"></script> {% load static %}
<html>
<head>
<title>KubusNet Knowledge Map</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
<!-- Bootstrap, popper, jQuery and filesaver - for demo purpose only -->
<!--
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://raw.githack.com/eligrey/FileSaver.js/master/dist/FileSaver.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
-->
<!-- Cytoscape and fcose -->
<script src="https://unpkg.com/cytoscape/dist/cytoscape.min.js"></script>
<script src="https://unpkg.com/layout-base/layout-base.js"></script>
<script src="https://unpkg.com/cose-base/cose-base.js"></script>
<script src="{% static 'js/cytoscape-fcose.js' %}"></script>
<script src="{% static 'js/demo-constraint-control.js' %}" defer></script>
<!-- CoLa for local comparison only -->
<!-- <script src="https://unpkg.com/webcola/WebCola/cola.min.js"></script> -->
<!-- <script src="cytoscape-cola.js"></script> -->
<script src="https://unpkg.com/cytoscape-layout-utilities/cytoscape-layout-utilities.js"></script>
<!--
<script src="https://unpkg.com/cytoscape-view-utilities/cytoscape-view-utilities.js"></script>
-->
<!-- <script src="https://unpkg.com/cytoscape-graphml/cytoscape-graphml.js"></script> -->
<!-- <script src="https://raw.githack.com/iVis-at-Bilkent/cytoscape.js-layvo/unstable/cytoscape-layvo.js"></script> --> <!-- For quality metrics -->
<!-- <script src="https://raw.githack.com/kinimesi/cytoscape-svg/master/cytoscape-svg.js"></script> --> <!-- For svg export -->
<!-- We use a workaround here to be able to debug real world files in local by keeping json content as js variable. -->
<script type="text/javascript" src="{% static 'js/uwsn.js' %}"></script> <!-- actual data etc. -->
<style>
body {
font-family: helvetica neue, helvetica, liberation sans, arial, sans-serif;
font-size: 13px;
}
#cy {
position: relative;
width: auto;
height: 95%;
z-index: 999;
margin-left: 0px;
right: 0px;
}
h1 {
opacity: 1;
color: #555;
font-size: 15px;
font-weight: bold;
padding-top: 5px;
}
hr.line {
margin-top: 9px;
margin-bottom: 9px
}
/* The sidepanel menu */
.sidepanel {
height: auto; /* Specify a height */
width: 375px; /* 0 width - change this with JavaScript */
position: absolute; /* Stay in place */
z-index: 1000; /* Stay on top */
float: left;
top: auto;
left: 0;
background-color: #d9fbff;
overflow-x: hidden; /* Disable horizontal scroll */
padding-top: 10px; /* Place content 10px from the top */
padding-bottom: 10px; /* Place content 10px from the bottom */
transition: 0s; /* 0.5 second transition effect to slide in the sidepanel */
}
table{
margin-left: 8;
margin-right: 10;
width: 360px;
}
/* The sidepanel links */
table td {
padding: 4px 4px 4px 0px;
text-decoration: none;
font-size: 14px;
color: #555;
transition: 0.3s;
text-align: left;
}
.layoutButton {
color: #555;
cursor: pointer;
background-color: #b7ffff;
padding: 5px 10px;
border: none;
margin-bottom: 5px;
}
.constraintButton {
cursor: pointer;
padding: 2px 5px;
background-color: #64ffee;
border-radius: 3px;
border-width: 1px;
}
.constraintButtonLarge {
cursor: pointer;
padding: 5px;
background-color: #64ffee;
border-radius: 3px;
border-width: 1px;
}
.btn-group-sm>.btn, .btn-sm {
font-size: 13px;
background-color: #7d8991;
border-color: #7d8991;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open>.dropdown-toggle.btn-primary {
color: #fff;
background-color: #60717d;
border-color: #60717d; /*set the color you want here*/
}
.btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-primary:active, .btn-outline-primary.active, .open>.dropdown-toggle.btn-primary {
color: #fff;
background-color: #60717d;
border-color: #60717d; /*set the color you want here*/
}
.btn-outline-primary{
font-size: 13px;
background-color: #ffffff;
color: #7d8991;
}
.form-control-sm {
font-size: 13px
}
.custom-select-sm {
font-size: 13px
}
.textField {
padding-left: 5px;
}
.checkbox {
margin-left: 0px;
}
.button:hover {
background-color: #0f0;
}
.custom-control-label {
padding-top: 2px;
}
.custom-control-input:checked~.custom-control-label::before {
color: #fff;
border-color: #7d8991;
background-color: #7d8991;
}
</style>
</head>
<body>
<h1> Knowledge Map </div>
<div id="cy"></div>
</body>
</html>
dev/kubusnet_static/js/cytoscape-fcose.js 0 → 100644
+ 1425
− 0
View file @ 3644d85a
This diff is collapsed.
dev/kubusnet_static/js/demo-constraint-control.js 0 → 100644
+ 219
− 0
View file @ 3644d85a
// define default stylesheet
let defaultStylesheet = [
{
selector: 'node',
style: {
'background-color': '#bdd3d4',
'label': 'data(id)',
'text-valign': 'center',
'background-opacity': 0.7
}
},
{
selector: ':parent',
style: {
// 'background-opacity': 0.333,
'background-color': '#e8e8e8',
'border-color': '#DADADA',
// 'border-width': 3,
'text-valign': 'bottom'
}
},
{
selector: 'edge',
style: {
'curve-style': 'straight',
'line-color': '#bdd3d4'
}
},
{
selector: 'node:selected',
style: {
'background-color': '#33ff00',
'border-color': '#22ee00'
}
},
{
selector: 'node.fixed',
style: {
'shape': 'diamond',
'background-color': '#9D9696',
}
},
{
selector: 'node.fixed:selected',
style: {
'background-color': '#33ff00',
}
},
{
selector: 'node.alignment',
style: {
'shape': 'round-heptagon',
'background-color': '#fef2d1',
}
},
{
selector: 'node.alignment:selected',
style: {
'background-color': '#33ff00',
}
},
{
selector: 'node.relative',
style: {
'shape': 'rectangle',
'background-color': '#fed3d1',
}
},
{
selector: 'node.relative:selected',
style: {
'background-color': '#33ff00',
}
},
{
selector: 'edge:selected',
style: {
'line-color': '#33ff00'
}
}
];
let cy = window.cy = cytoscape({
container: document.getElementById('cy'),
ready: function(){
let layoutUtilities = this.layoutUtilities({
desiredAspectRatio: this.width()/this.height()
});
this.nodes().forEach(function(node){
let size = Math.random()*40+30;
node.css("width", size);
node.css("height", size);
});
// let initialLayout = this.layout({name: 'fcose', step: 'all', animationEasing: 'ease-out'});
// initialLayout.pon('layoutstart').then(function( event ){
// constraints.fixedNodeConstraint = JSON.parse(JSON.stringify(sample1_constraints.fixedNodeConstraint));
// clearConstraintListTable();
// fillConstraintListTableFromConstraints();
// });
// initialLayout.run();
},
layout: {name: 'preset'},
style: defaultStylesheet,
// elements: {
// nodes: [
// {data: {id: 'n1'}},
// {data: {id: 'n2'}},
// {data: {id: 'n3', parent: 'n8'}},
// {data: {id: 'n5'}},
// {data: {id: 'n6', parent: 'n8'}},
// {data: {id: 'n7', parent: 'n8'}},
// {data: {id: 'n8'}},
// {data: {id: 'f1'}, classes: ['fixed']},
// {data: {id: 'f2'}, classes: ['fixed']},
// {data: {id: 'f3', parent: 'n8'}, classes: ['fixed']},
// ],
// edges: [
// {data: {source: 'n1', target: 'f1'}},
// {data: {source: 'n1', target: 'n3'}},
// {data: {source: 'f1', target: 'n2'}},
// {data: {source: 'f1', target: 'n3'}},
// {data: {source: 'n3', target: 'f2'}},
// {data: {source: 'f2', target: 'n5'}},
// {data: {source: 'n5', target: 'n8'}},
// {data: {source: 'n6', target: 'n3'}},
// {data: {source: 'n6', target: 'n7'}},
// {data: {source: 'n6', target: 'f3'}}
// ]
// },
wheelSensitivity: 0.3
});
// BEGIN TUE FUCKING ABOUT
cy.json(uwsn);
cy.nodes().forEach(function (node) {
node.style({
'width': node.data('bbox').w,
'height': node.data('bbox').h,
"border-width": node.data('border-width'),
// "border-color": node.data('border-color'),
});
if (node.data('class') === 'process' || node.data('class') === 'association' || node.data('class') === "dissociation") {
node.style({
'background-color': node.data('background-color'),
'background-opacity': 0.3
});
} else {
node.style({
'background-image': node.data('background-image'),
// 'background-color': node.data('background-color'),
'background-opacity': node.data('background-opacity'),
'background-fit': 'contain',
'background-position-x': '50%',
'background-position-y': '50%',
});
}
if (node.data('label')) {
node.style({
'label': node.data('label'),
'text-wrap': 'wrap',
'font-size': node.data('font-size'),
'color': node.data('color')
});
}
});
// constraints.fixedNodeConstraint = undefined;
// constraints.alignmentConstraint = undefined;
// constraints.relativePlacementConstraint = undefined;
//let constraintObject = sampleFileNames[selectionObject.value + "_constraints"];
//if(constraintObject.fixedNodeConstraint)
// constraints.fixedNodeConstraint = JSON.parse(JSON.stringify(uwsn_constraints.fixedNodeConstraint));
//if(constraintObject.alignmentConstraint)
// constraints.relativePlacementConstraint =
//if(constraintObject.relativePlacementConstraint)
// constraints.relativePlacementConstraint = JSON.parse(JSON.stringify(constraintObject.relativePlacementConstraint));
//cy.style(defaultStylesheet);
cy.endBatch()
let constraints = {
fixedNodeConstraint: undefined,
alignmentConstraint: undefined,
relativePlacementConstraint: undefined, //JSON.parse(JSON.stringify(uwsn_constraints.relativePlacementConstraint)),
};
let options = {
name: 'fcose',
quality: "default",
randomize: false,
animate: true,
animationDuration: 1000,
animationEasing: undefined,
fit: true,
padding: 30,
nestingFactor: 0.1,
gravityRangeCompound: 1.5,
gravityCompound: 1.0,
relativePlacementConstraint: constraints.relativePlacementConstraint,
};
//clearConstraintListTable();
// let finalOptions = Object.assign({}, options);
// finalOptions.step = "all";
cy.layout(options).run();
// END TUE HERE
dev/kubusnet_static/js/uwsn.js 0 → 100644
+ 2395
− 0
View file @ 3644d85a
This diff is collapsed.
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment