Skip to content
Snippets Groups Projects
Commit 588d7e23 authored by baigner's avatar baigner
Browse files

UPDATE for Visualization Package: The three views (XDSM, Edge Bundles and...

UPDATE for Visualization Package: The three views (XDSM, Edge Bundles and Sankey Diagram) work with all right click options.


Former-commit-id: 01b5cbe3b94d03a1cada65b028006d59849c3d5c
parent fdc8d0f5
No related branches found
No related tags found
No related merge requests found
Showing
with 30631 additions and 2 deletions
......@@ -10,10 +10,9 @@ graft kadmos/interface/templates
graft kadmos/utilities/cmdows
# Include current vispack templates
graft kadmos/external/D3_vispack/KADMOS_VisualizationPackage_170403_Arial
graft kadmos/external/D3_vispack/KADMOS_VisualizationPackage_170403_TrebuchetMS
graft kadmos/external/D3_vispack/KADMOS_VisualizationPackage_170419
graft kadmos/external/D3_vispack/KADMOS_VisualizationPackage_170523
graft kadmos/external/D3_vispack/KADMOS_VisualizationPackage_170530
# Include XDSM templates
include kadmos/external/XDSM_writer/*.tex
......
<!doctype html>
<html class="js" lang="">
<style>
.node {
fill: #aaa;
}
.node:hover {
fill: #666666;
}
.link {
stroke: #3399FF;
stroke-opacity: .4;
stroke-width: 2px;
fill: none;
}
.invisibleLink {
stroke: #000;
stroke-opacity: 0;
stroke-width: 15px;
fill: none;
}
.invisibleLink:hover {
stroke: #3399FF;
stroke-opacity: 0.4;
stroke-width: 5px;
fill: none;
}
.node:hover,
.node--source,
.node--target {
font-weight: 700;
}
.node--source {
fill: #99CC00;
}
.node--target {
fill: #CC0000;
}
.link--target,
.link--source{
stroke-opacity: .8;
stroke-width: 2px;
}
.link--source {
stroke: #CC0000;
}
.link--target {
stroke: #99CC00;
}
.treeNode {
cursor: pointer;
}
.overlay{
background-color:#FFF;
}
.treeNode circle {
fill: #fff;
stroke: #3399FF;
stroke-width: 1.5px;
}
.treeNode text {
font-size:16px;
font-family:Arial;
}
.treeLink {
fill: none;
stroke: #ccc;
stroke-width: 1.5px;
}
.d3-context-menu {
position: absolute;
display: none;
background-color: #f2f2f2;
border-radius: 4px;
font-family: Arial;
font-size: 16pt;
min-width: 300px;
border: 1px solid #d4d4d4;
z-index:1200;
}
.d3-context-menu ul {
list-style-type: none;
margin: 4px 0px;
padding: 0px;
cursor: default;
}
.d3-context-menu ul li {
padding: 4px 16px;
}
.d3-context-menu ul li:hover {
background-color: #4677f8;
}
.d3-context-menu ul li > ul {
position: absolute;
background-color: #f2f2f2;
top: 0;
min-width: 350px;
left: 300px;
z-index: -1;
}
.d3-context-menu ul li > ul li:hover
{
background-color: #4677f8;
color: #fefefe;
}
.ackn {
fill: #666666;
stroke: #666666;
stroke-width: 2.0;
}
.acknGroup:hover .ackn{
fill: #3399FF;
stroke: #3399FF;
}
.newDiv {
position:relative;
top: -100px;
left: 220px;
background-color: none;
}
.newDiv a {
text-decoration: none;
color: white;
font-family: Arial;
font-size: 20pt;
padding-top: 12px;
padding-right: 12px;
padding-bottom: 12px;
padding-left: 6px;
display:inline-block;
}
.newDiv ul {
display: inline-block;;
margin: 0;
padding: 0;
background-color: #666666;
}
.newDiv ul li {display: inline-block;}
.newDiv ul li:hover {background: #888;}
.newDiv ul li:hover ul {display: block;}
.newDiv ul li ul {
position: absolute;
min-width: 200px;
display: none;
}
.newDiv ul li ul li {
background: #555;
display: block;
}
.newDiv ul li ul li a {
display:block !important
}
.newDiv ul li ul li:hover {background: #3399FF;}
.acknText {
font-family: Arial;
font-size: 12pt;
fill: #666666;
}
</style>
<head>
<meta charset="utf-8">
<title>KADMOS Edge Bundles</title>
</head>
<body>
<script src="circleLayout.js"></script>
</body>
</html>
\ No newline at end of file
Source diff could not be displayed: it is too large. Options to address this: view the blob.
<!doctype html>
<html class="js" lang="">
<style>
.node {
fill: #aaa;
}
.node:hover {
fill: #666666;
}
.link {
stroke: #3399FF;
stroke-opacity: 0.4;
stroke-width: 2px;
fill: none;
}
.invisibleLink {
stroke: #000;
stroke-opacity: 0;
stroke-width: 15px;
fill: none;
}
.invisibleLink:hover {
stroke: #3399FF;
stroke-opacity: 1.0;
stroke-width: 5px;
fill: none;
}
.node:hover,
.node--source,
.node--target {
font-weight: 700;
}
.node--source {
fill: #99CC00;
}
.node--target {
fill: #CC0000;
}
.link--target,
.link--source{
stroke-opacity: .8;
stroke-width: 5px;
}
.link--source {
stroke: #CC0000;
}
.link--target {
stroke: #99CC00;
}
.treeNode {
cursor: pointer;
}
.overlay{
background-color:#FFF;
}
.treeNode circle {
fill: #fff;
stroke: #3399FF;
stroke-width: 1.5px;
}
.treeNode text {
font-size:16px;
font-family:Arial;
}
.treeLink {
fill: none;
stroke: #ccc;
stroke-width: 1.5px;
}
.d3-context-menu {
position: absolute;
display: none;
background-color: #f2f2f2;
border-radius: 4px;
font-family: Arial;
font-size: 16pt;
min-width: 300px;
border: 1px solid #d4d4d4;
z-index:1200;
}
.d3-context-menu ul {
list-style-type: none;
margin: 4px 0px;
padding: 0px;
cursor: default;
}
.d3-context-menu ul li {
padding: 4px 16px;
}
.d3-context-menu ul li:hover {
background-color: #4677f8;
}
.d3-context-menu ul li > ul {
position: absolute;
background-color: #f2f2f2;
top: 0;
min-width: 350px;
left: 300px;
z-index: -1;
}
.d3-context-menu ul li > ul li:hover
{
background-color: #4677f8;
color: #fefefe;
}
.ackn {
fill: #666666;
stroke: #666666;
stroke-width: 2.0;
}
.acknGroup:hover .ackn{
fill: #3399FF;
stroke: #3399FF;
}
.newDiv {
position:relative;
top: -100px;
left: 220px;
background-color: none;
}
.newDiv a {
text-decoration: none;
color: white;
font-family: Arial;
font-size: 20pt;
padding-top: 12px;
padding-right: 12px;
padding-bottom: 12px;
padding-left: 6px;
display:inline-block;
}
.newDiv ul {
display: inline-block;;
margin: 0;
padding: 0;
background-color: #666666;
}
.newDiv ul li {display: inline-block;}
.newDiv ul li:hover {background: #888;}
.newDiv ul li:hover ul {display: block;}
.newDiv ul li ul {
position: absolute;
min-width: 200px;
display: none;
}
.newDiv ul li ul li {
background: #555;
display: block;
}
.newDiv ul li ul li a {
display:block !important
}
.newDiv ul li ul li:hover {background: #3399FF;}
table {
width: 800px;
table-layout:fixed;
}
table, th, td {
font-family: Arial;
font-size: 16pt;
background-color: white;
border: 2pt solid darkgrey;
border-collapse: collapse;
text-align: left;
word-wrap:break-word;
}
}
th, td {
padding-top: 6px;
padding-right: 20px;
padding-bottom: 6px;
padding-left: 20px;
min-width: 100px;
max-width: 400px;
}
.remCircle {
stroke: black;
stroke-width: 2;
fill: red;
fill-opacity: .6
}
.remMinus {
stroke: black;
stroke-width: 2;
}
.acknText {
font-family: Arial;
font-size: 12pt;
fill: #666666;
}
</style>
<head>
<meta charset="utf-8">
<title>KADMOS Edge Bundles</title>
</head>
<body>
<script src="edgeBundles.js"></script>
</body>
</html>
\ No newline at end of file
Source diff could not be displayed: it is too large. Options to address this: view the blob.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<title>Acknowledgements</title>
<style type="text/css" media="screen">
body {
color:#888;
margin:20px 10px;
font-family:Arial;
font-size:12px;
}
a:link {color:#666;}
a:visited {color:#666;}
</style>
</head>
<body style="overflow-x:hidden; overflow-y:auto">
<div style="-webkit-overflow-scrolling: touch; -webkit-text-size-adjust: none">
<div>
Created by Benedikt Aigner and Imco van Gent for the
<a href="http://www.agile-project.eu/">AGILE Project</a>
in 2016. This project has received funding from the European Union's Horizon 2020 research and innovation framework programme under grant agreement No 636202
<br>
<br>
<br>
The KADMOS Visualization Package was created using the following open source packages:
<br>
<br>
<a href="https://d3js.org/">D3.js</a>
package &copy 2015 by Mike Bostock released under the
<a href="https://opensource.org/licenses/BSD-3-Clause">BSD license</a>
<br>
<br>
<a href="https://github.com/OneraHub/XDSMjs">XDSM.js</a>
package &copy 2016 by R&eacutemi Lafage released under the
<a href="http://www.apache.org/licenses/LICENSE-2.0">Apache License, Version 2.0</a>
<br>
<br>
<a href="https://github.com/Neilos/bihisankey">BiHiSankey.js</a>
package &copy 2015 by Neil Atkinson released under the
<a href="https://opensource.org/licenses/MIT">MIT License</a>
<br>
<br>
<br>
<font size="-2">Rev. 05/11/2017</font>
</div>
</div>
</body>
</html>
\ No newline at end of file
file added to ensure presence of json folder on the repository
\ No newline at end of file
<!doctype html>
<html>
<style>
.node rect {
cursor: move;
shape-rendering: crispEdges;
}
.node text {
pointer-events: none;
text-shadow: 1px 1px 2px #fff;
font-size: 0.8em;
font-family: sans-serif;
}
#tooltip {
position: absolute;
pointer-events: none;
font-size: 0.7em;
font-family: sans-serif;
padding: 3px;
width: auto;
height: auto;
background-color: #F2F2F2;
-webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.4);
-mox-box-shadow: 0px 0px 0px 5px rgba(0, 0, 0, 0.4);
box-shadow: 0px 0px 5px rbga(0, 0, 0, 0.4);
pointer-events: none;
}
.value {
white-space: pre-line;
margin: 0;
}
div.treeDiv {
position: absolute;
}
div.contextDiv {
position: absolute;
}
sub, sup {
/* Specified in % so that the sup/sup is the right size relative to the surrounding text */
font-size: 75%;
/* Zero out the line-height so that it doesn't interfere with the positioning that follows */
line-height: 0;
/* Where the magic happens: makes all browsers position the sup/sup properly, relative to the surrounding text */
position: relative;
/* Note that if you're using Eric Meyer's reset.css, this is already set and you can remove this rule */
vertical-align: baseline;
}
sup {
/* Move the superscripted text up */
top: -0.5em;
}
sub {
/* Move the subscripted text down, but only half as far down as the superscript moved up */
bottom: -0.5em;
}
/* Aigner: New styles for tree layout */
.treeNode {
cursor: pointer;
}
.overlay{
background-color:#FFF;
}
.treeNode circle {
fill: #fff;
stroke: #3399FF;
stroke-width: 1.5px;
}
.treeNode text {
font-size:16px;
font-family:Arial;
}
.treeLink {
fill: none;
stroke: #ccc;
stroke-width: 1.5px;
}
.d3-context-menu {
position: absolute;
display: none;
background-color: #f2f2f2;
border-radius: 4px;
font-family: Arial;
font-size: 16pt;
width: 350px;
border: 1px solid #d4d4d4;
z-index:1200;
}
.d3-context-menu ul {
list-style-type: none;
margin: 4px 0px;
padding: 0px;
cursor: default;
}
.d3-context-menu ul li {
padding: 4px 16px;
}
.d3-context-menu ul li:hover {
background-color: #3399FF;
}
.d3-context-menu ul li > ul {
position: absolute;
background-color: #f2f2f2;
top: 0;
min-width: 350px;
left: 350px;
z-index: -1;
}
.d3-context-menu ul li > ul li:hover
{
background-color: #3399FF;
color: #fefefe;
}
.ackn {
fill: #666666;
stroke: #666666;
stroke-width: 2.0;
}
.acknGroup:hover .ackn{
fill: #3399FF;
stroke: #3399FF;
}
.newDiv {
position:relative;
top: -100px;
left: 220px;
background-color: none;
}
.newDiv a {
text-decoration: none;
color: white;
font-family: Arial;
font-size: 20pt;
padding-top: 12px;
padding-right: 12px;
padding-bottom: 12px;
padding-left: 6px;
display:inline-block;
}
.newDiv ul {
display: inline-block;;
margin: 0;
padding: 0;
background-color: #666666;
}
.newDiv ul li {display: inline-block;}
.newDiv ul li:hover {background: #888;}
.newDiv ul li:hover ul {display: block;}
.newDiv ul li ul {
position: absolute;
min-width: 200px;
display: none;
}
.newDiv ul li ul li {
background: #555;
display: block;
}
.newDiv ul li ul li a {
display:block !important
}
.newDiv ul li ul li:hover {background: #3399FF;}
table {
width: 800px;
table-layout:fixed;
}
table, th, td {
font-family: Arial;
font-size: 16pt;
background-color: white;
border: 2pt solid darkgrey;
border-collapse: collapse;
text-align: left;
word-wrap:break-word;
}
}
th, td {
padding-top: 6px;
padding-right: 20px;
padding-bottom: 6px;
padding-left: 20px;
min-width: 100px;
max-width: 400px;
}
.remCircle {
stroke: black;
stroke-width: 2;
fill: red;
fill-opacity: .6
}
.remMinus {
stroke: black;
stroke-width: 2;
}
.acknText {
font-family: Arial;
font-size: 12pt;
fill: #666666;
}
</style>
<head>
<meta charset="utf-8">
<title>KADMOS Sankey Diagram</title>
</head>
<body>
<script src="sankeyDiagram.js"></script>
</body>
</html>
\ No newline at end of file
<!doctype html>
<html class="js" lang="">
<style>
/*
* XDSMjs
* Copyright 2016 Rémi Lafage
*/
/* Component types */
.xdsm .user {
visibility: hidden;
}
.xdsm .coordinator {
fill: #FFFFFF;
stroke: black;
stroke-width: 1px;
}
.xdsm .optimization {
fill: #CCCCFF;
stroke: black;
stroke-width: 1px;
}
.xdsm .converger {
fill: #FFE5CC;
stroke: black;
stroke-width: 1px;
}
.xdsm .doe {
fill: #FFFCCC;
stroke: black;
stroke-width: 1px;
}
.xdsm .rcganalysis {
fill: #E5DEB3;
stroke: black;
stroke-width: 1px;
}
.xdsm .precouplinganalysis {
fill: #BCE4FA;
stroke: black;
stroke-width: 1px;
}
.xdsm .preiteratoranalysis {
fill: #BCE4FA;
stroke: black;
stroke-width: 1px;
}
.xdsm .postiteratoranalysis {
fill: #BCE4FA;
stroke: black;
stroke-width: 1px;
}
.xdsm .coupledanalysis {
fill: #CCFFCC;
stroke: black;
stroke-width: 1px;
}
.xdsm .postcouplinganalysis {
fill: #F2CCD9;
stroke: black;
stroke-width: 1px;
}
.xdsm .consistencyconstraintfunction {
fill: #F2CCD9;
stroke: black;
stroke-width: 1px;
}
.xdsm .lp_optimization {
fill: #CCCCFF;
stroke: black;
stroke-width: 1px;
}
.xdsm .analysis {
fill: #CCFFCC;
stroke: black;
stroke-width: 1px;
}
.xdsm .mdo {
fill: #FFCCCC;
stroke: black;
stroke-width: 1px;
}
.xdsm .function {
fill: #F2CCD9;
stroke: black;
stroke-width: 1px;
}
.xdsm .mda {
fill: #FFE5CC;
stroke: black;
stroke-width: 1px;
}
.xdsm .metamodel {
fill: #FFFCCC;
stroke: black;
stroke-width: 1px;
}
/* Title */
.xdsm g.title text {
display: block;
font-size: 2em;
margin-top: 0.67em;
margin-bottom: 0.67em;
margin-left: 0;
margin-right: 0;
font-family:Arial;
}
.xdsm g.title rect {
fill: none;
}
/* Text Default */
.xdsm text {
fill: black;
stroke: none;
font-size: 16pt;
font-family:Arial;
}
.xdsm tspan.sub {
font-size: small;
font-family:Arial;
}
.xdsm tspan.sup {
font-size: small;
font-family:Arial;
}
/* Data */
.xdsm .dataInter polygon {
fill: #E5E5E5;
stroke: black;
stroke-width: 1px;
}
.xdsm .dataIO polygon {
fill: #FFFFFF;
stroke: black;
stroke-width: 1px;
}
/* Dataflow */
.xdsm g.dataflow {
fill: none;
stroke: grey;
stroke-width: 8px;
}
/* Workflow */
.xdsm g.workflow {
fill: none;
stroke: black;
stroke-width: 2px;
}
/* Tooltip */
div.tooltip {
position: absolute;
text-align: center;
font-size: 16pt;
padding: 10px;
background: lightsteelblue;
border: 0px;
border-radius: 8px;
pointer-events: none;
}
div.treeDiv {
position: absolute;
}
div.contextDiv {
position: absolute;
}
sub, sup {
/* Specified in % so that the sup/sup is the right size relative to the surrounding text */
font-size: 75%;
/* Zero out the line-height so that it doesn't interfere with the positioning that follows */
line-height: 0;
/* Where the magic happens: makes all browsers position the sup/sup properly, relative to the surrounding text */
position: relative;
/* Note that if you're using Eric Meyer's reset.css, this is already set and you can remove this rule */
vertical-align: baseline;
}
sup {
/* Move the superscripted text up */
top: -0.5em;
}
sub {
/* Move the subscripted text down, but only half as far down as the superscript moved up */
bottom: -0.5em;
}
/* Aigner: New styles for tree layout */
.node {
cursor: pointer;
}
.overlay{
background-color:#FFF;
}
.node circle {
fill: #fff;
stroke: #3399FF;
stroke-width: 1.5px;
}
.node text {
font-size:16pt;
font-family:Arial;
}
.link {
fill: none;
stroke: #ccc;
stroke-width: 1.5px;
}
.d3-context-menu {
position: absolute;
display: none;
background-color: #f2f2f2;
border-radius: 4px;
font-family: Arial;
font-size: 16pt;
width: 350px;
border: 1px solid #d4d4d4;
z-index:1200;
}
.d3-context-menu ul {
list-style-type: none;
margin: 4px 0px;
padding: 0px;
cursor: default;
}
.d3-context-menu ul li {
padding: 4px 16px;
}
.d3-context-menu ul li:hover {
background-color: #3399FF;
}
.d3-context-menu ul li > ul {
position: absolute;
background-color: #f2f2f2;
top: 0;
min-width: 350px;
left: 350px;
z-index: -1;
}
.d3-context-menu ul li > ul li:hover
{
background-color: #3399FF;
color: #fefefe;
}
.ackn {
fill: #666666;
stroke: #666666;
stroke-width: 2.0;
}
.acknGroup:hover .ackn{
fill: #3399FF;
stroke: #3399FF;
}
.newDiv {
position:relative;
top: -100px;
left: 220px;
background-color: none;
}
.newDiv a {
text-decoration: none;
color: white;
font-family: Arial;
font-size: 20pt;
padding-top: 12px;
padding-right: 12px;
padding-bottom: 12px;
padding-left: 6px;
display:inline-block;
}
.newDiv ul {
display: inline-block;;
margin: 0;
padding: 0;
background-color: #666666;
}
.newDiv ul li {display: inline-block;}
.newDiv ul li:hover {background: #888;}
.newDiv ul li:hover ul {display: block;}
.newDiv ul li ul {
position: absolute;
min-width: 200px;
display: none;
}
.newDiv ul li ul li {
background: #555;
display: block;
}
.newDiv ul li ul li a {
display:block !important
}
.newDiv ul li ul li:hover {background: #3399FF;}
table {
width: 800px;
table-layout:fixed;
}
table, th, td {
font-family: Arial;
font-size: 16pt;
background-color: white;
border: 2pt solid darkgrey;
border-collapse: collapse;
text-align: left;
word-wrap:break-word;
}
}
th, td {
padding-top: 6px;
padding-right: 20px;
padding-bottom: 6px;
padding-left: 20px;
min-width: 100px;
max-width: 400px;
}
.remCircle {
stroke: black;
stroke-width: 2;
fill: red;
fill-opacity: .6
}
.remMinus {
stroke: black;
stroke-width: 2;
}
.acknText {
font-family: Arial;
font-size: 12pt;
fill: #666666;
}
</style>
<head>
<meta charset="utf-8">
<title>KADMOS XDSM View</title>
</head>
<body>
<script src="xdsm.js"></script>
</body>
</html>
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment