Added visualization suite (9f44bf4c) · Commits · born / obc2kg

visualization/README.md

0 → 100644

+7 −0

Original line number	Diff line number	Diff line
		# How to run the visualization suite

		## Pre-requisites
		1. Active internet connection as some of the dependencies are loaded via CDNs
		2. If you use _Firefox_, just open the file index.html in it
		3. If you use a different browser, you need to set up a simple web server; with python for example, you just need to run "python -m SimpleHTTPServer" (python v2) or "python -m http.server" (python v3) in this directory
		* Per default, this should serve the app on port 8000 of localhost (access via 0.0.0.0:8000 or localhost:8000 in your browser)
		No newline at end of file

visualization/client/css/col.css

0 → 100644

+41 −0

Original line number	Diff line number	Diff line

		/* SECTIONS ============================================================================= */

		.section {
		clear: both;
		padding: 0px;
		margin: 0px;
		/background-color: #9A958F; /
		background-color: #e6e6e6;
		}

		/* GROUPING ============================================================================= */


		.group:before,
		.group:after {
		content:"";
		display:table;
		}
		.group:after {
		clear:both;
		}
		.group {
		zoom:1; /* For IE 6/7 (trigger hasLayout) */
		}

		/* GRID COLUMN SETUP ==================================================================== */

		.col {
		display: block;
		float: left;
		margin: 10px 0px 0px 0px;
		/margin: 1% 0 1% 1.6%;/
		}

		.col2 {
		display: block;
		float: left;
		margin: 0px 0px 0px 0px;
		/margin: 1% 0 1% 1.6%;/
		}

visualization/client/css/general.css

0 → 100644

+561 −0

Original line number	Diff line number	Diff line
		body {
		width: 100%;
		height: 100%;

		font-family: 'Raleway', sans-serif;
		line-height: 1.5em;
		background-color: #f8f8f8;
		}
		.wow {
		visibility: hidden;
		}

		main {
		width: 100%;
		height: 100%;
		}

		.mainbody {
		/background-color: #f8f8f8;/
		background-color: #eef2f6;
		display: table;
		width: 100%;
		height: 100%;
		}

		h1.small {
		/font-family: Merienda One, cursive;/
		font-weight: 900;
		font-size: 60px;
		font-variant: small-caps;
		text-shadow: 4px 4px 4px #aaa;
		}

		.top {
		width: 100%;
		position: absolute;
		top: 30px;
		/padding-right: 100px;/
		}

		.top-left {
		padding-left: 30px;
		}

		.top-right {
		padding-right: 30px;
		}

		.no-list-style ul {
		margin: 0;
		padding: 0;
		overflow: hidden;
		-webkit-padding-start: 0;
		-moz-padding-start: 0;
		}

		.no-list-style ul li {
		padding: 0;
		border: 1px;
		border-color: black;
		}

		.entry-button {
		-webkit-transition-duration: 0.4s; /* Safari */
		transition-duration: 0.4s;
		background-color: #990500;
		color: white;
		transition: all 0.5s;
		cursor: pointer;
		}

		.entry-button:hover {
		/background-color: #990500;/
		background-color: #FF9C01;
		box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
		}

		.entry-button span {
		cursor: pointer;
		display: inline-block;
		position: relative;
		transition: 0.5s;
		color: #fff;
		}

		.entry-button span:after {
		content: '\00bb';
		position: absolute;
		opacity: 0;
		top: 0;
		right: -20px;
		transition: 0.5s;
		}

		.entry-button:hover span {
		padding-right: 20px;
		}

		.entry-button:hover span:after {
		opacity: 1;
		right: 0;
		}

		.accordion-toggle {
		display: block;
		}

		a.accordion-toggle:hover {
		text-decoration: none;
		}

		.activity-section .panel-default {
		width: 75%;
		margin-left: 12.5%;
		}

		.footer-small {
		padding-top: 15px;
		font-size: 12px;
		}

		header {
		background-color: #2b3e50 !important;
		position: fixed;
		width: 100%;
		height: 61px;
		overflow: hidden;
		z-index: 100;
		-webkit-box-shadow: 0px 3px 5px rgba(100, 100, 100, 0.49);
		-moz-box-shadow: 0px 3px 5px rgba(100, 100, 100, 0.49);
		box-shadow: 0px 3px 5px rgba(100, 100, 100, 0.49);
		}

		#apptitle {
		color: #fff;
		font-size: 27px;
		margin-left: 1%;
		font-variant: small-caps;
		}

		.drawer-heading {
		height: 61px;
		border: none;
		}

		.drawer-title {
		text-align: center;
		padding-top: 15px;
		}

		.drawer-nav {
		text-align: center;
		}

		.drawer-nav li a {
		color: black;
		}

		.drawer-nav li a:hover {
		color: #23527c;
		background-color: #e6e6e6;
		}

		.drawer-nav li a:focus {
		background-color: #e6e6e6;
		}

		.drawer-nav li span {
		font-size: 12px;
		word-break: keep-all;
		}

		#header .h1 {
		margin: 0;
		padding-top: 15px;
		}

		.cont {
		padding-top: 5px;
		padding-bottom: 5px;
		width: 85%;
		margin: auto;
		}

		.modal-dialog {
		width: 660px;
		padding-top: 4%;
		}

		.modal-title {
		margin: 0px !important;
		}

		#nav {
		padding-bottom: 10010px;
		margin-bottom: -10000px;
		float: left;
		width: 230px;
		margin-left: -100%;
		background: #eee;
		}

		.navbar {
		width: 75%;
		float: left;
		}

		.navbar-complement {
		width: 25%;
		float: right;
		}

		footer {
		position: fixed;
		bottom: 0;
		padding-top: 10px;
		text-align: center;
		font-size: 11px;
		width: 100%;
		z-index: 100;

		-webkit-box-shadow: 0px -3px 5px rgba(100, 100, 100, 0.49);
		-moz-box-shadow: 0px -3px 5px rgba(100, 100, 100, 0.49);
		box-shadow: 0px -3px 5px rgba(100, 100, 100, 0.49);
		}

		.footer-style {
		/background-color: #e6e6e6;/
		background-color: #2b3e50;
		}

		#wrapper {
		overflow: hidden;
		}

		#content {
		margin-left: 230px; /* Same as 'nav' width */
		}

		.innertube {
		margin: 15px; /* Padding for content */
		margin-top: 0;
		}

		p {
		color: black;
		}

		tr th a{
		color: black;
		text-decoration: none;
		}

		tr th a:hover{
		color: black;
		text-decoration: none;
		}

		nav ul {
		display: flex;
		flex-direction: row;
		list-style-type: none;
		margin: 0;
		padding: 0;
		overflow: hidden;
		}

		nav ul li {
		list-style: none;
		flex-grow: 1;
		text-align: center;
		float: left;
		margin: 0;
		padding: 0;
		border: 1px;
		border-color: black;
		}

		nav ul li p {
		display: block;
		color: black;
		text-align: center;
		padding: 2px 12px;
		text-decoration: none;
		}

		nav ul li a {
		display: block;
		color: black;
		text-align: center;
		padding: 10px 12px;
		text-decoration: none;
		}

		nav ul li button {
		display: block;
		color: black;
		text-align: center;
		padding: 10px 12px;
		text-decoration: none;
		}

		nav ul li a:hover {
		color: #23527c;
		background-color: #e6e6e6;
		border-radius: 5px;
		text-decoration: none;
		}

		nav ul li a:focus {
		text-decoration: none;
		}

		.close {
		font-size: 26px;
		}

		.notcenter {
		text-align: unset;
		}

		.nopadding {
		display: unset;
		padding: 0;
		}

		a.nopadding.btn:hover {
		background: #E0E0E0;
		}

		.apple {
		background: #fff;
		border: 1px solid #FFF;
		border-radius: 5px;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
		box-shadow: 1px 2px 4px rgba(0,0,0,.4);
		margin: 20px auto;
		}

		.apple h4, .apple li, .apple form fieldset {
		margin: 15px;
		}

		.apple p {
		margin: 15px;
		text-align: justify;
		}

		.apple form fieldset h4 {
		margin: 0px;
		}

		.white-apple {
		background: white;
		width: 95%;
		height: 200px;
		max-height: 200px;
		overflow: auto;
		border: 1px solid #ccc;
		border-radius: 4px;
		-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
		box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
		-webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
		-o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
		transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
		}

		table {
		border-top: 1px solid black;
		border-bottom: 1px solid black;
		}

		td {
		border-top: 1px solid #DDD;
		font-size: 12px;
		vertical-align: middle !important;
		}

		.table>thead>tr>th {
		border-bottom: 1px solid black;
		}

		.table>thead>tr>th a {
		cursor: pointer;
		}

		.table>thead>tr>th a .glyphicon {
		font-size: 12px;
		}

		.pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > span:hover, .pagination > .active > a:focus, .pagination > .active > span:focus, .pagination > .disabled > span, .pagination > .disabled > span:hover, .pagination > .disabled > span:focus, .pagination > .disabled > a, .pagination > .disabled > a:hover, .pagination > .disabled > a:focus {
		z-index: 0 !important;
		}

		.open > .dropdown-menu {
		z-index: 101;
		}

		.input-group .form-control {
		z-index: 0;
		}

		.name-input {
		width: 180px;
		display: inline;
		}

		.number-input {
		width: 80px;
		display: inline;
		}

		.search-bar {
		width: 200px;
		display: inline;
		}

		a.help:hover {
		cursor: default;
		text-decoration: none;
		}

		.backbutton:after {
		content: '\200b';
		}

		.popover {
		text-align: justify;
		text-justify: inter-word;
		}

		.form-table {
		display: table;
		}

		.form-table p {
		display: table-row;
		}

		.form-table p label {
		display: table-cell;
		}

		.form-table p input {
		margin-left: 10px;
		display: table-cell;
		}

		.form-table p select {
		margin-left: 10px;
		display: table-cell;
		}

		.form-table p span {
		margin-left: 10px;
		}

		#newpopover {
		position: relative;
		color: white;
		display: inline-block;
		}

		#newpopover a:hover {
		text-decoration: none;
		}

		#newpopover > i {
		text-align: center;
		font: italic normal 90%;
		line-height: 100%;
		color: black;
		text-shadow: white 0 1px;
		background: #fff;
		background-clip: padding-box;
		box-shadow: 0 0px 2px rgba(0, 0, 0, 0.5);
		border: 1px solid #e0e0e0;
		border-radius: 3px;
		position: absolute;
		min-width: 50px;
		white-space: nowrap;
		margin-left: -100%;
		padding: 10px 0;
		padding-left: 5px;
		padding-right: 5px;
		bottom: 100%;
		margin-bottom: 10px;
		visibility: hidden;
		opacity: 0;
		-webkit-transition: opacity 0.3s linear;
		-moz-transition: opacity 0.3s linear;
		-ms-transition: opacity 0.3s linear;
		-o-transition: opacity 0.3s linear;
		transition: opacity 0.3s linear;
		}

		#newpopover > i:before, #newpopover > i:after {
		content: "";
		position: absolute;
		border-left: 10px solid transparent;
		border-right: 10px solid transparent;
		top: 100%;
		left: 50%;
		margin-left: -10px;
		}

		#newpopover > i:before {
		border-top: 10px solid #ddd;
		margin-top: 0px;
		}

		#newpopover > i:after {
		border-top: 10px solid #fff;
		margin-top: -2px;
		z-index: 1;
		}

		#newpopover:hover > i {
		visibility: visible;
		opacity: 1;
		}

		canvas {
		background-color: #ffffff;
		-webkit-box-shadow: 3px 3px 3px 0 #e3e3e3;
		-moz-box-shadow: 3px 3px 3px 0 #e3e3e3;
		box-shadow: 3px 3px 3px 0 #e3e3e3;
		border: 1px solid #c3c3c3;
		height: 150px;
		}

		.nav, .pagination, .carousel, .panel-title a { cursor: pointer; }

		.pagination {
		margin: 12px 0;
		border: 1px solid #E0E0E0;
		}

		.top-pagination {
		margin-bottom: 10px;
		}

		.top-pagination button {
		color: #337ab7;
		}

		.top-pagination .btn[disabled] {
		color: #777;
		background-color: #fff;
		border-color: #ddd
		}

		p label {
		font-weight: 0 !important;
		}

		.popover-title {
		background-color: #2b3e50;
		color: #fff;
		}

visualization/client/css/grids.css

0 → 100644

+15 −0

Original line number	Diff line number	Diff line
		/* GRID OF TWO ============================================================================= */

		.span_a_half {
		width: 50%;
		}

		/* GRID OF TEN (INCOMPLETE) ============================================================================= */

		.span_3_of_10 {
		width: 18%;
		}

		.span_of_app_title {
		width: 64%;
		}

visualization/client/css/vissuite.css

0 → 100644

+341 −0

Original line number	Diff line number	Diff line
		.drawer-controls {
		height: auto;
		}

		.drawer-contents {
		background-color: #eef2f6;
		}

		.visapp {
		float: left;
		position: absolute;
		top: 61px;
		bottom: 40px;
		width: 100%;
		display: table-row;
		/background-color: #f8f8f8;/
		background-color: #eef2f6;
		}

		.vis-apple {
		background: #fff;
		border: 1px solid #FFF;
		border-radius: 5px;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
		box-shadow: 1px 2px 4px rgba(0,0,0,.4);
		margin: 10px;
		margin-bottom: 60px;
		padding-left: 30px;
		padding-right: 30px;
		padding-bottom: 30px;
		}

		.vissuite-welcome {
		margin-top: 30px;
		margin-bottom: 30px;
		}

		.vissuite-welcome h2 {
		color: #990500;
		}

		.overlay {
		position: fixed;
		top: 52px;
		right: 20px;
		width: 400px;
		min-height: auto;
		z-index: 1;
		}

		#overlay {
		position: static;
		width: inherit;
		}

		#clusteroverlay {
		position: static;
		width: inherit;
		}

		.overlay-content{
		overflow: auto;
		max-height: 60vh;
		}

		.stats-overlay {
		position: fixed;
		bottom: 52px;
		left: 15px;
		width: 300px;
		z-index: 1;
		}

		#stats-overlay {
		position: static;
		width: 350px;
		display: inline-block;
		/background-color: #fff;/
		border-radius: 10%;
		padding-left: 3px;
		padding-right: 3px;
		font-size: small;
		}

		.yearslider-overlay {
		position: fixed;
		top: 65px;
		width: 400px;
		z-index: 1;
		margin: 0 auto; /* Will not center vertically and won't work in IE6/7. */
		left: 0;
		right: 0;
		}

		#yearslider-overlay {
		position: static;
		width: inherit;
		}

		#animate-slider {
		position: static;
		width: inherit;
		}

		.wrap {
		white-space: pre-wrap; /* css-3 */
		white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
		white-space: -pre-wrap; /* Opera 4-6 */
		white-space: -o-pre-wrap; /* Opera 7 */
		word-wrap: break-word; /* Internet Explorer 5.5+ */
		}

		#network, #loadingBar {
		height: 100%;
		width: 100%;
		}

		#loadingBar {
		position: absolute;
		top: 100%;
		transform: translateY(-50%);
		}

		.circle-container .circle {
		border-color: white;
		border-radius: 50%;
		border-width: 5px;
		height: 25px;
		width: 25px;
		line-height: 25px;
		display: inline-block;
		vertical-align: middle;
		margin-left: 5px;
		}

		.circle-container .text {
		font-size: 14px;
		}

		hr.style-one {
		border: 0;
		height: 1px;
		margin-top: 15px;
		margin-bottom: 15px;
		background: #333;
		background-image: linear-gradient(to right, #f2f2f2, #ccc, #f2f2f2);
		}

		.vis-search {
		background: white;
		/width: 95%;/
		max-height: 50vh;
		margin-top: 3px;
		overflow: auto;
		border: 1px solid #ccc;
		border-radius: 4px;
		-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
		box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
		-webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
		-o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
		transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
		}

		.vis-button:hover, .vis-refreshGraph:hover, .vis-exportGraph:hover {
		box-shadow: none !important;
		border: 1px solid black;
		}

		.vis-up, .vis-down, .vis-left, .vis-right {
		display: none !important;
		}

		.vis-exportGraph {
		left: 40px;
		}

		.vis-refreshGraph, .vis-exportGraph {
		bottom: 30px;
		width: 34px;
		height: 34px;
		-moz-border-radius: 17px;
		border-radius: 17px;
		position: absolute;
		display: inline-block;
		background-position: 2px 2px;
		background-repeat: no-repeat;
		cursor: pointer;
		-webkit-touch-callout: none;
		-webkit-user-select: none;
		-khtml-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none
		}

		.vis-zoomIn, .vis-zoomOut, .vis-zoomExtends, .vis-refreshGraph, .vis-exportGraph {
		display: inline-block;
		padding: 6px 12px;
		margin-bottom: 0;
		font-size: 14px;
		font-weight: 400;
		line-height: 1.42857143;
		text-align: center;
		white-space: nowrap;
		vertical-align: middle;
		-ms-touch-action: manipulation;
		touch-action: manipulation;
		cursor: pointer;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
		background-image: none;
		border: 1px solid transparent;
		border-radius: 4px

		color: #333;
		background-color: #fff;
		border-color: #ccc;

		font-family: 'Glyphicons Halflings';
		font-style: normal;
		font-weight: 400;
		line-height: 1;

		background-image: none !important;
		}

		.vis-zoomOut:before {
		content: "\2212";
		vertical-align: middle;
		margin-left: -3px;
		}

		.vis-zoomIn:before {
		content: "\2b";
		vertical-align: middle;
		margin-left: -2px;
		}

		.vis-zoomExtends:before{
		content: "\e140";
		vertical-align: middle;
		margin-left: -3px;
		}

		.vis-refreshGraph:before{
		content: "\e030";
		vertical-align: middle;
		margin-left: -3px;
		}

		.vis-exportGraph:before{
		content: "\e025";
		vertical-align: middle;
		margin-left: -3px;
		}

		.custom-slider.rzslider .rz-bar {
		background: #ffe4d1;
		height: 2px;
		}

		.custom-slider.rzslider .rz-selection {
		background: orange;
		}

		.custom-slider.rzslider .rz-pointer {
		width: 8px;
		height: 16px;
		top: auto; /* to remove the default positioning */
		bottom: 0;
		background-color: #333;
		border-top-left-radius: 3px;
		border-top-right-radius: 3px;
		}

		.custom-slider.rzslider .rz-pointer:after {
		display: none;
		}

		.custom-slider.rzslider .rz-bubble {
		bottom: 14px;
		}

		.custom-slider.rzslider .rz-limit {
		font-weight: bold;
		/color: orange;/
		color: #8693ac;
		}

		.custom-slider.rzslider .rz-tick {
		width: 1px;
		height: 10px;
		margin-left: 4px;
		border-radius: 0;
		background: #ffe4d1;
		top: -1px;
		}

		.custom-slider.rzslider .rz-tick.rz-selected {
		background: orange;
		}

		.vis-modal {
		max-height: 500px;
		overflow-y: scroll;
		}

		.cg-busy {
		z-index: 10000;
		}

		.network-input {
		width: 200px;
		display: inline;
		}

		.no-bottom-margin {
		margin-bottom: 0px;
		}

		.search-box {
		/width: 95% !important;/
		font-size: 14px;
		word-spacing: -0.5em;
		}

		#connectedevents {
		padding-top: 4%;
		}

		.modal-content {
		width: 1000px;
		margin-left: -200px;
		}

		.high {
		height: inherit;
		}