<template id="triple-notes" >
<style data-src="/src/external/font-awesome/css/font-awesome.css"></style>
<style data-src="/templates/livelystyle.css"></style>
<style type="text/css">
:host {
  display: flex;
  flex-direction: row;
}
#graph {
  flex: 2;
}
#meta {
  border: 2px solid steelblue;
  background-color: #eeeeee;
  flex:1;
  height: 100%;
  
  display: flex;
  flex-direction: column;

}

#meta knot-view {
  flex:; 1;
}
#meta knot-view {
  flex:1;
  height: 100%;
}

.node circle {
  /*fill: lightgrey;*/
}

/* overwrites other selectors for text */
.node text {
}

/*-------- Text --------*/
.text {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 12px;
}
.subtext {
    font-size: 9px;
}
.text.instance-count {
    fill: #666;
}
.external + text .instance-count {
    fill: #aaa;
}
.cardinality {
    font-size: 10px;
}
.text, .embedded {
    pointer-events: none;
}

/*------- Colors ------*/


.class, .object, .disjoint, .objectproperty, .disjointwith, .equivalentproperty, .transitiveproperty, .functionalproperty, .inversefunctionalproperty, .symmetricproperty, .allvaluesfromproperty, .somevaluesfromproperty {
    fill: #acf;
}
.label .datatype, .datatypeproperty {
    fill: #9c6;
}
.rdf, .rdfproperty {
    fill: #c9c;
}
.literal, .node .datatype {
    fill: #fc3;
}
.deprecated, .deprecatedproperty {
    fill: #ccc;
}
.external, .externalproperty {
    fill: #36c;
}
/* own knot types, mostly file endings */
.image {
  fill: #f3f;
}
.audio {
  fill: #0f3;
}
.movie {
  fill: #ff3;
}
.presentation {
  fill: #f66;
}
.markdown {
  fill: #ccc;
}
.html {
  fill: #00f;
}
.tag {
  fill: #fff;
}
.is-a {
  fill: #9c6;
}
.same-as {
  fill: #fc3;
}
.contains {
  fill: #36c;
}
.unspecified {
  fill: #acf;
}
path, .nofill {
	fill: none;
}
marker path {
	fill: #000;
}
.class, path, line, .fineline {
	stroke: #000;
}
.white, .subclass, .subclassproperty, .external + text {
    fill: #fff;
}
.class.hovered, .property.hovered, .cardinality.hovered, .cardinality.focused, .filled.hovered, .filled.focused, .values-from.filled.hovered {
    fill: #f00 !important;
    cursor: pointer;
}
.feature{
    fill: #f00;
    cursor: pointer;
}

@-webkit-keyframes pulseAnimation {
    0% {
        -webkit-transform: scale(1.5);
        stroke-width: 3.33;
    }
    50%{ stroke-width: 4;}
    100% {
        -webkit-transform: scale(1.0);
        stroke-width: 5;
    }
}
@-moz-keyframes pulseAnimation {
    0% {
        -webkit-transform: scale(1.5);
        stroke-width: 3.33;
    }
    50%{ stroke-width: 4;}
    100% {
        -webkit-transform: scale(1.0);
        stroke-width: 5;
    }
}
@-o-keyframes pulseAnimation {
    0% {
        -webkit-transform: scale(1.5);
        stroke-width: 3.33;
    }
    50%{ stroke-width: 4;}
    100% {
        -webkit-transform: scale(1.0);
        stroke-width: 5;
    }
}
@keyframes pulseAnimation {
    0% {
        -webkit-transform: scale(1.5);
        stroke-width: 3.33;
    }
    50%{ stroke-width: 4;}
    100% {
        -webkit-transform: scale(1.0);
        stroke-width: 5;
    }
}
.searchResultA {
    fill: none;
    stroke-width: 5;
    stroke: #f00;
    -webkit-animation-name: pulseAnimation;
    -moz-animation-name: pulseAnimation;
    -o-animation-name: pulseAnimation;
    animation-name: pulseAnimation;

    -webkit-animation-duration: 0.8s;
    -moz-animation-duration: 0.8s;
    -o-animation-duration: 0.8s;
    animation-duration: 0.8s;

    -webkit-transform: translateZ(0);
    -webkit-animation-iteration-count: 3;
    -moz-animation-iteration-count: 3;
    -o-animation-iteration-count: 3;
    animation-iteration-count: 3;

    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    -o-animation-timing-function: linear;
    animation-timing-function: linear;
}
/* a class for not animated search results (hovered over node)*/
.searchResultB {
    fill: none;
    stroke-width: 5;
    stroke: #f00;
}

.focused, path.hovered {
	stroke: #f00 !important;
}
.indirect-highlighting, .feature:hover {
    fill: #f90;
    cursor: pointer;
}
.values-from {
    stroke: #69c;
}
.symbol, .values-from.filled {
    fill: #69c;
}

/*------- Strokes ------*/
.class, path, line {
	stroke-width: 2;
}
.fineline {
	stroke-width: 1;
}
.dashed, .anonymous {
	stroke-dasharray: 8;
}
.dotted {
	stroke-dasharray: 3;
}
rect:hover, circle:hover {
	stroke-width: 4px;
}
.nostroke {
	stroke: none;
}

/*-----------------------------------------------------------------
 Additional elements for the WebVOWL demo (NOT part of spec)
-----------------------------------------------------------------*/

marker path {
    /* Safari and Chrome workaround for inheriting the style of its link.
       Use any value that is larger than the length of the marker path. */
    stroke-dasharray: 100;
}
</style>

<div id="graph"></div>
<div id="meta">
  <!--<h1>Meta</h1>-->
  <div>
  <button id="reload" title="Reload Graph">
    <i class="fa fa-refresh" aria-hidden="true"></i>
  </button>
  </div>

  <h2>Config</h2>
  <div>
    <div>
      <label for="link-distance">Link Distance</label>
      <input type="range" id="link-distance" min ="100" max="500" step ="50" value ="200">
    </div>
    <div>
      <label for="nbody-knot-strength">NBody Knot</label>
      <input type="range" id="nbody-knot-strength" min ="100" max="500" step ="50" value ="200">
    </div>
    <div>
      <label for="nbody-triple-strength">NBody Triple</label>
      <input type="range" id="nbody-triple-strength" min ="100" max="500" step ="50" value ="200">
    </div>
    <div>
      <label for="force-center-x">Center X</label>
      <input type="range" id="force-center-x" min ="100" max="500" step ="50" value ="200">
    </div>
    <div>
      <label for="force-center-y">Center Y</label>
      <input type="range" id="force-center-y" min ="100" max="500" step ="50" value ="200">
    </div>
    <div>
      <label for="force-x-target">X</label>
      <input type="range" id="force-x-target" min ="-500" max="500" step ="100" value ="0">
    </div>
    <div>
      <label for="force-x-strength">X Strength</label>
      <input type="range" id="force-x-strength" min ="0" max="0.2" step ="0.001" value ="0.001">
    </div>
    <div>
      <label for="force-y-target">Y</label>
      <input type="range" id="force-y-target" min ="-500" max="500" step ="100" value ="0">
    </div>
    <div>
      <label for="force-y-strength">Y Strength</label>
      <input type="range" id="force-y-strength" min ="0" max="0.2" step ="0.001" value ="0.001">
    </div>
  </div>
  <div id="statistics">
    <h2>Statistics</h2>
  </div>
  <h2>Selection</h2>
  <knot-view id="knot-view"></knot-view>
</div>
</template>


