Skip to content

Instantly share code, notes, and snippets.

@mwalzer

mwalzer/qc_edges.html

Created June 1, 2022 13:43
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mwalzer/cb654ab2f1cfb2c7588dc80fcbecc368 to your computer and use it in GitHub Desktop.
Save mwalzer/cb654ab2f1cfb2c7588dc80fcbecc368 to your computer and use it in GitHub Desktop.
Download ZIP
CV visualisation with pyvis
Raw
qc_edges.html
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vis-network@latest/styles/vis-network.css" type="text/css" />
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vis-network@latest/dist/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: 100%;
height: 750px;
background-color: #a0a0a0;
border: 1px solid lightgray;
position: relative;
float: left;
}
/* position absolute is important and the container has to be relative or absolute as well. */
div.popup {
position:absolute;
top:0px;
left:0px;
display:none;
background-color:#f5f4ed;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
border: 1px solid #808074;
box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
}
/* hide the original tooltip */
.vis-network-tooltip {
display:none;
}
</style>
</head>
<body>
<div id = "mynetwork"></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([{"font": {"color": "black"}, "id": 0, "label": "Proteomics Standards Initiative Mass Spectrometry Vocabularies", "shape": "dot", "title": "\u003ca href=\u0027https://www.ebi.ac.uk/ols/ontologies/ms/terms?iri=http%3A%2F%2Fpurl.obolibrary.org%2Fobo%2FMS_0000000\u0027\u003eMS:0000000"}, {"font": {"color": "black"}, "id": 1, "label": "PSI-MS CV Quality Control Vocabulary", "shape": "dot", "title": "\u003ca href=\u0027https://www.ebi.ac.uk/ols/ontologies/ms/terms?iri=http%3A%2F%2Fpurl.obolibrary.org%2Fobo%2FMS_4000000\u0027\u003eMS:4000000"}, {"font": {"color": "black"}, "id": 2, "label": "QC metric", "shape": "dot", "title": "\u003ca href=\u0027https://www.ebi.ac.uk/ols/ontologies/ms/terms?iri=http%3A%2F%2Fpurl.obolibrary.org%2Fobo%2FMS_4000001\u0027\u003eMS:4000001"}, {"font": {"color": "black"}, "id": 3, "label": "QC metric value type", "shape": "dot", "title": "\u003ca href=\u0027https://www.ebi.ac.uk/ols/ontologies/ms/terms?iri=http%3A%2F%2Fpurl.obolibrary.org%2Fobo%2FMS_4000002\u0027\u003eMS:4000002"}, {"font": {"color": "black"}, "id": 4, "label": "single value", "shape": "dot", "title": "\u003ca href=\u0027https://www.ebi.ac.uk/ols/ontologies/ms/terms?iri=http%3A%2F%2Fpurl.obolibrary.org%2Fobo%2FMS_4000003\u0027\u003eMS:4000003"}, {"font": {"color": "black"}, "id": 5, "label": "n-tuple", "shape": "dot", "title": "\u003ca href=\u0027https://www.ebi.ac.uk/ols/ontologies/ms/terms?iri=http%3A%2F%2Fpurl.obolibrary.org%2Fobo%2FMS_4000004\u0027\u003eMS:4000004"}, {"font": {"color": "black"}, "id": 6, "label": "table", "shape": "dot", "title": "\u003ca href=\u0027https://www.ebi.ac.uk/ols/ontologies/ms/terms?iri=http%3A%2F%2Fpurl.obolibrary.org%2Fobo%2FMS_4000005\u0027\u003eMS:4000005"}, {"font": {"color": "black"}, "id": 7, "label": "matrix", "shape": "dot", "title": "\u003ca href=\u0027https://www.ebi.ac.uk/ols/ontologies/ms/terms?iri=http%3A%2F%2Fpurl.obolibrary.org%2Fobo%2FMS_4000006\u0027\u003eMS:4000006"}, {"font": {"color": "black"}, "id": 8, "label": "QC metric category", "shape": "dot", "title": "\u003ca href=\u0027https://www.ebi.ac.uk/ols/ontologies/ms/terms?iri=http%3A%2F%2Fpurl.obolibrary.org%2Fobo%2FMS_4000007\u0027\u003eMS:4000007"}, {"font": {"color": "black"}, "id": 9, "label": "ID based metric", "shape": "dot", "title": "\u003ca href=\u0027https://www.ebi.ac.uk/ols/ontologies/ms/terms?iri=http%3A%2F%2Fpurl.obolibrary.org%2Fobo%2FMS_4000008\u0027\u003eMS:4000008"}, {"font": {"color": "black"}, "id": 10, "label": "ID free metric", "shape": "dot", "title": "\u003ca href=\u0027https://www.ebi.ac.uk/ols/ontologies/ms/terms?iri=http%3A%2F%2Fpurl.obolibrary.org%2Fobo%2FMS_4000009\u0027\u003eMS:4000009"}, {"font": {"color": "black"}, "id": 11, "label": "quantification based metric", "shape": "dot", "title": "\u003ca href=\u0027https://www.ebi.ac.uk/ols/ontologies/ms/terms?iri=http%3A%2F%2Fpurl.obolibrary.org%2Fobo%2FMS_4000010\u0027\u003eMS:4000010"}, {"font": {"color": "black"}, "id": 12, "label": "single run based metric", "shape": "dot", "title": "\u003ca href=\u0027https://www.ebi.ac.uk/ols/ontologies/ms/terms?iri=http%3A%2F%2Fpurl.obolibrary.org%2Fobo%2FMS_4000012\u0027\u003eMS:4000012"}, {"font": {"color": "black"}, "id": 13, "label": "multiple runs based metric", "shape": "dot", "title": "\u003ca href=\u0027https://www.ebi.ac.uk/ols/ontologies/ms/terms?iri=http%3A%2F%2Fpurl.obolibrary.org%2Fobo%2FMS_4000013\u0027\u003eMS:4000013"}, {"font": {"color": "black"}, "id": 14, "label": "single spectrum based metric", "shape": "dot", "title": "\u003ca href=\u0027https://www.ebi.ac.uk/ols/ontologies/ms/terms?iri=http%3A%2F%2Fpurl.obolibrary.org%2Fobo%2FMS_4000014\u0027\u003eMS:4000014"}, {"font": {"color": "black"}, "id": 15, "label": "multiple spectra based metric", "shape": "dot", "title": "\u003ca href=\u0027https://www.ebi.ac.uk/ols/ontologies/ms/terms?iri=http%3A%2F%2Fpurl.obolibrary.org%2Fobo%2FMS_4000015\u0027\u003eMS:4000015"}, {"font": {"color": "black"}, "id": 16, "label": "retention time metric", "shape": "dot", "title": "\u003ca href=\u0027https://www.ebi.ac.uk/ols/ontologies/ms/terms?iri=http%3A%2F%2Fpurl.obolibrary.org%2Fobo%2FMS_4000016\u0027\u003eMS:4000016"}, {"font": {"color": "black"}, "id": 17, "label": "chromatogram metric", "shape": "dot", "title": "\u003ca href=\u0027https://www.ebi.ac.uk/ols/ontologies/ms/terms?iri=http%3A%2F%2Fpurl.obolibrary.org%2Fobo%2FMS_4000017\u0027\u003eMS:4000017"}, {"font": {"color": "black"}, "id": 18, "label": "XIC metric", "shape": "dot", "title": "\u003ca href=\u0027https://www.ebi.ac.uk/ols/ontologies/ms/terms?iri=http%3A%2F%2Fpurl.obolibrary.org%2Fobo%2FMS_4000018\u0027\u003eMS:4000018"}, {"font": {"color": "black"}, "id": 19, "label": "MS metric", "shape": "dot", "title": "\u003ca href=\u0027https://www.ebi.ac.uk/ols/ontologies/ms/terms?iri=http%3A%2F%2Fpurl.obolibrary.org%2Fobo%2FMS_4000019\u0027\u003eMS:4000019"}, {"font": {"color": "black"}, "id": 20, "label": "ion source metric", "shape": "dot", "title": "\u003ca href=\u0027https://www.ebi.ac.uk/ols/ontologies/ms/terms?iri=http%3A%2F%2Fpurl.obolibrary.org%2Fobo%2FMS_4000020\u0027\u003eMS:4000020"}, {"font": {"color": "black"}, "id": 21, "label": "MS1 metric", "shape": "dot", "title": "\u003ca href=\u0027https://www.ebi.ac.uk/ols/ontologies/ms/terms?iri=http%3A%2F%2Fpurl.obolibrary.org%2Fobo%2FMS_4000021\u0027\u003eMS:4000021"}, {"font": {"color": "black"}, "id": 22, "label": "MS2 metric", "shape": "dot", "title": "\u003ca href=\u0027https://www.ebi.ac.uk/ols/ontologies/ms/terms?iri=http%3A%2F%2Fpurl.obolibrary.org%2Fobo%2FMS_4000022\u0027\u003eMS:4000022"}, {"font": {"color": "black"}, "id": 23, "label": "sample preparation metric", "shape": "dot", "title": "\u003ca href=\u0027https://www.ebi.ac.uk/ols/ontologies/ms/terms?iri=http%3A%2F%2Fpurl.obolibrary.org%2Fobo%2FMS_4000023\u0027\u003eMS:4000023"}, {"font": {"color": "black"}, "id": 24, "label": "environment metric", "shape": "dot", "title": "\u003ca href=\u0027https://www.ebi.ac.uk/ols/ontologies/ms/terms?iri=http%3A%2F%2Fpurl.obolibrary.org%2Fobo%2FMS_4000024\u0027\u003eMS:4000024"}, {"font": {"color": "black"}, "id": 25, "label": "XIC50 fraction", "shape": "dot", "title": "\u003ca href=\u0027https://www.ebi.ac.uk/ols/ontologies/ms/terms?iri=http%3A%2F%2Fpurl.obolibrary.org%2Fobo%2FMS_4000050\u0027\u003eMS:4000050"}, {"font": {"color": "black"}, "id": 26, "label": "XIC-FWHM quantiles", "shape": "dot", "title": "\u003ca href=\u0027https://www.ebi.ac.uk/ols/ontologies/ms/terms?iri=http%3A%2F%2Fpurl.obolibrary.org%2Fobo%2FMS_4000051\u0027\u003eMS:4000051"}, {"font": {"color": "black"}, "id": 27, "label": "XIC-Height quartile ratios", "shape": "dot", "title": "\u003ca href=\u0027https://www.ebi.ac.uk/ols/ontologies/ms/terms?iri=http%3A%2F%2Fpurl.obolibrary.org%2Fobo%2FMS_4000052\u0027\u003eMS:4000052"}, {"font": {"color": "black"}, "id": 28, "label": "chromatography duration", "shape": "dot", "title": "\u003ca href=\u0027https://www.ebi.ac.uk/ols/ontologies/ms/terms?iri=http%3A%2F%2Fpurl.obolibrary.org%2Fobo%2FMS_4000053\u0027\u003eMS:4000053"}, {"font": {"color": "black"}, "id": 29, "label": "TIC quarters RT fraction", "shape": "dot", "title": "\u003ca href=\u0027https://www.ebi.ac.uk/ols/ontologies/ms/terms?iri=http%3A%2F%2Fpurl.obolibrary.org%2Fobo%2FMS_4000054\u0027\u003eMS:4000054"}, {"font": {"color": "black"}, "id": 30, "label": "MS1 quarter RT fraction", "shape": "dot", "title": "\u003ca href=\u0027https://www.ebi.ac.uk/ols/ontologies/ms/terms?iri=http%3A%2F%2Fpurl.obolibrary.org%2Fobo%2FMS_4000055\u0027\u003eMS:4000055"}, {"font": {"color": "black"}, "id": 31, "label": "MS2 quarter RT fraction", "shape": "dot", "title": "\u003ca href=\u0027https://www.ebi.ac.uk/ols/ontologies/ms/terms?iri=http%3A%2F%2Fpurl.obolibrary.org%2Fobo%2FMS_4000056\u0027\u003eMS:4000056"}, {"font": {"color": "black"}, "id": 32, "label": "MS1 TIC-change quartile ratios", "shape": "dot", "title": "\u003ca href=\u0027https://www.ebi.ac.uk/ols/ontologies/ms/terms?iri=http%3A%2F%2Fpurl.obolibrary.org%2Fobo%2FMS_4000057\u0027\u003eMS:4000057"}, {"font": {"color": "black"}, "id": 33, "label": "MS1 TIC quartile ratios", "shape": "dot", "title": "\u003ca href=\u0027https://www.ebi.ac.uk/ols/ontologies/ms/terms?iri=http%3A%2F%2Fpurl.obolibrary.org%2Fobo%2FMS_4000058\u0027\u003eMS:4000058"}, {"font": {"color": "black"}, "id": 34, "label": "number of MS1 spectra", "shape": "dot", "title": "\u003ca href=\u0027https://www.ebi.ac.uk/ols/ontologies/ms/terms?iri=http%3A%2F%2Fpurl.obolibrary.org%2Fobo%2FMS_4000059\u0027\u003eMS:4000059"}, {"font": {"color": "black"}, "id": 35, "label": "number of MS2 spectra", "shape": "dot", "title": "\u003ca href=\u0027https://www.ebi.ac.uk/ols/ontologies/ms/terms?iri=http%3A%2F%2Fpurl.obolibrary.org%2Fobo%2FMS_4000060\u0027\u003eMS:4000060"}, {"font": {"color": "black"}, "id": 36, "label": "MS1 density quantiles", "shape": "dot", "title": "\u003ca href=\u0027https://www.ebi.ac.uk/ols/ontologies/ms/terms?iri=http%3A%2F%2Fpurl.obolibrary.org%2Fobo%2FMS_4000061\u0027\u003eMS:4000061"}, {"font": {"color": "black"}, "id": 37, "label": "MS2 density quantiles", "shape": "dot", "title": "\u003ca href=\u0027https://www.ebi.ac.uk/ols/ontologies/ms/terms?iri=http%3A%2F%2Fpurl.obolibrary.org%2Fobo%2FMS_4000062\u0027\u003eMS:4000062"}, {"font": {"color": "black"}, "id": 38, "label": "MS2 known precursor charges fractions", "shape": "dot", "title": "\u003ca href=\u0027https://www.ebi.ac.uk/ols/ontologies/ms/terms?iri=http%3A%2F%2Fpurl.obolibrary.org%2Fobo%2FMS_4000063\u0027\u003eMS:4000063"}, {"font": {"color": "black"}, "id": 39, "label": "MS2 unknown and likely precursor charges fractions", "shape": "dot", "title": "\u003ca href=\u0027https://www.ebi.ac.uk/ols/ontologies/ms/terms?iri=http%3A%2F%2Fpurl.obolibrary.org%2Fobo%2FMS_4000064\u0027\u003eMS:4000064"}, {"font": {"color": "black"}, "id": 40, "label": "fastest frequency for MS level 1 collection", "shape": "dot", "title": "\u003ca href=\u0027https://www.ebi.ac.uk/ols/ontologies/ms/terms?iri=http%3A%2F%2Fpurl.obolibrary.org%2Fobo%2FMS_4000065\u0027\u003eMS:4000065"}, {"font": {"color": "black"}, "id": 41, "label": "fastest frequency for MS level 2 collection", "shape": "dot", "title": "\u003ca href=\u0027https://www.ebi.ac.uk/ols/ontologies/ms/terms?iri=http%3A%2F%2Fpurl.obolibrary.org%2Fobo%2FMS_4000066\u0027\u003eMS:4000066"}, {"font": {"color": "black"}, "id": 42, "label": "MS run duration", "shape": "dot", "title": "\u003ca href=\u0027https://www.ebi.ac.uk/ols/ontologies/ms/terms?iri=http%3A%2F%2Fpurl.obolibrary.org%2Fobo%2FMS_4000067\u0027\u003eMS:4000067"}, {"font": {"color": "black"}, "id": 43, "label": "spectra half-TIC", "shape": "dot", "title": "\u003ca href=\u0027https://www.ebi.ac.uk/ols/ontologies/ms/terms?iri=http%3A%2F%2Fpurl.obolibrary.org%2Fobo%2FMS_4000068\u0027\u003eMS:4000068"}, {"font": {"color": "black"}, "id": 44, "label": "m/z acquisition range", "shape": "dot", "title": "\u003ca href=\u0027https://www.ebi.ac.uk/ols/ontologies/ms/terms?iri=http%3A%2F%2Fpurl.obolibrary.org%2Fobo%2FMS_4000069\u0027\u003eMS:4000069"}, {"font": {"color": "black"}, "id": 45, "label": "retention time acquisition range", "shape": "dot", "title": "\u003ca href=\u0027https://www.ebi.ac.uk/ols/ontologies/ms/terms?iri=http%3A%2F%2Fpurl.obolibrary.org%2Fobo%2FMS_4000070\u0027\u003eMS:4000070"}, {"font": {"color": "black"}, "id": 46, "label": "number of chromatograms", "shape": "dot", "title": "\u003ca href=\u0027https://www.ebi.ac.uk/ols/ontologies/ms/terms?iri=http%3A%2F%2Fpurl.obolibrary.org%2Fobo%2FMS_4000071\u0027\u003eMS:4000071"}, {"font": {"color": "black"}, "id": 47, "label": "observed mass accuracy", "shape": "dot", "title": "\u003ca href=\u0027https://www.ebi.ac.uk/ols/ontologies/ms/terms?iri=http%3A%2F%2Fpurl.obolibrary.org%2Fobo%2FMS_4000072\u0027\u003eMS:4000072"}, {"font": {"color": "black"}, "id": 48, "label": "QC sample metric", "shape": "dot", "title": "\u003ca href=\u0027https://www.ebi.ac.uk/ols/ontologies/ms/terms?iri=http%3A%2F%2Fpurl.obolibrary.org%2Fobo%2FMS_4000073\u0027\u003eMS:4000073"}, {"font": {"color": "black"}, "id": 49, "label": "high complexity QC sample metric", "shape": "dot", "title": "\u003ca href=\u0027https://www.ebi.ac.uk/ols/ontologies/ms/terms?iri=http%3A%2F%2Fpurl.obolibrary.org%2Fobo%2FMS_4000074\u0027\u003eMS:4000074"}, {"font": {"color": "black"}, "id": 50, "label": "low complexity QC sample metric", "shape": "dot", "title": "\u003ca href=\u0027https://www.ebi.ac.uk/ols/ontologies/ms/terms?iri=http%3A%2F%2Fpurl.obolibrary.org%2Fobo%2FMS_4000075\u0027\u003eMS:4000075"}, {"font": {"color": "black"}, "id": 51, "label": "QC2 sample metric", "shape": "dot", "title": "\u003ca href=\u0027https://www.ebi.ac.uk/ols/ontologies/ms/terms?iri=http%3A%2F%2Fpurl.obolibrary.org%2Fobo%2FMS_4000076\u0027\u003eMS:4000076"}, {"font": {"color": "black"}, "id": 52, "label": "QC1 sample metric", "shape": "dot", "title": "\u003ca href=\u0027https://www.ebi.ac.uk/ols/ontologies/ms/terms?iri=http%3A%2F%2Fpurl.obolibrary.org%2Fobo%2FMS_4000077\u0027\u003eMS:4000077"}, {"font": {"color": "black"}, "id": 53, "label": "QC2 sample mass accuracies", "shape": "dot", "title": "\u003ca href=\u0027https://www.ebi.ac.uk/ols/ontologies/ms/terms?iri=http%3A%2F%2Fpurl.obolibrary.org%2Fobo%2FMS_4000078\u0027\u003eMS:4000078"}, {"font": {"color": "black"}, "id": 54, "label": "QC2 sample intensities", "shape": "dot", "title": "\u003ca href=\u0027https://www.ebi.ac.uk/ols/ontologies/ms/terms?iri=http%3A%2F%2Fpurl.obolibrary.org%2Fobo%2FMS_4000079\u0027\u003eMS:4000079"}, {"font": {"color": "black"}, "id": 55, "label": "QC non-metric term", "shape": "dot", "title": "\u003ca href=\u0027https://www.ebi.ac.uk/ols/ontologies/ms/terms?iri=http%3A%2F%2Fpurl.obolibrary.org%2Fobo%2FMS_4000080\u0027\u003eMS:4000080"}, {"font": {"color": "black"}, "id": 56, "label": "first principal component", "shape": "dot", "title": "\u003ca href=\u0027https://www.ebi.ac.uk/ols/ontologies/ms/terms?iri=http%3A%2F%2Fpurl.obolibrary.org%2Fobo%2FMS_4000081\u0027\u003eMS:4000081"}, {"font": {"color": "black"}, "id": 57, "label": "second principal component", "shape": "dot", "title": "\u003ca href=\u0027https://www.ebi.ac.uk/ols/ontologies/ms/terms?iri=http%3A%2F%2Fpurl.obolibrary.org%2Fobo%2FMS_4000082\u0027\u003eMS:4000082"}, {"font": {"color": "black"}, "id": 58, "label": "third principal component", "shape": "dot", "title": "\u003ca href=\u0027https://www.ebi.ac.uk/ols/ontologies/ms/terms?iri=http%3A%2F%2Fpurl.obolibrary.org%2Fobo%2FMS_4000083\u0027\u003eMS:4000083"}, {"font": {"color": "black"}, "id": 59, "label": "fourth principal component", "shape": "dot", "title": "\u003ca href=\u0027https://www.ebi.ac.uk/ols/ontologies/ms/terms?iri=http%3A%2F%2Fpurl.obolibrary.org%2Fobo%2FMS_4000084\u0027\u003eMS:4000084"}, {"font": {"color": "black"}, "id": 60, "label": "fifth principal component", "shape": "dot", "title": "\u003ca href=\u0027https://www.ebi.ac.uk/ols/ontologies/ms/terms?iri=http%3A%2F%2Fpurl.obolibrary.org%2Fobo%2FMS_4000085\u0027\u003eMS:4000085"}, {"font": {"color": "black"}, "id": 61, "label": "mzQC input reference", "shape": "dot", "title": "\u003ca href=\u0027https://www.ebi.ac.uk/ols/ontologies/ms/terms?iri=http%3A%2F%2Fpurl.obolibrary.org%2Fobo%2FMS_4000086\u0027\u003eMS:4000086"}, {"font": {"color": "black"}, "id": 62, "label": "mzQC plot label", "shape": "dot", "title": "\u003ca href=\u0027https://www.ebi.ac.uk/ols/ontologies/ms/terms?iri=http%3A%2F%2Fpurl.obolibrary.org%2Fobo%2FMS_4000087\u0027\u003eMS:4000087"}, {"font": {"color": "black"}, "id": 63, "label": "batch label", "shape": "dot", "title": "\u003ca href=\u0027https://www.ebi.ac.uk/ols/ontologies/ms/terms?iri=http%3A%2F%2Fpurl.obolibrary.org%2Fobo%2FMS_4000088\u0027\u003eMS:4000088"}, {"font": {"color": "black"}, "id": 64, "label": "injection sequence label", "shape": "dot", "title": "\u003ca href=\u0027https://www.ebi.ac.uk/ols/ontologies/ms/terms?iri=http%3A%2F%2Fpurl.obolibrary.org%2Fobo%2FMS_4000089\u0027\u003eMS:4000089"}, {"font": {"color": "black"}, "id": 65, "label": "principal component analysis of MaxQuant\u0027s protein group raw intensities", "shape": "dot", "title": "\u003ca href=\u0027https://www.ebi.ac.uk/ols/ontologies/ms/terms?iri=http%3A%2F%2Fpurl.obolibrary.org%2Fobo%2FMS_4000090\u0027\u003eMS:4000090"}, {"font": {"color": "black"}, "id": 66, "label": "principal component analysis of MaxQuant\u0027s protein group lfq intensities", "shape": "dot", "title": "\u003ca href=\u0027https://www.ebi.ac.uk/ols/ontologies/ms/terms?iri=http%3A%2F%2Fpurl.obolibrary.org%2Fobo%2FMS_4000091\u0027\u003eMS:4000091"}, {"font": {"color": "black"}, "id": 67, "label": "identified MS1 feature area principal component analysis result", "shape": "dot", "title": "\u003ca href=\u0027https://www.ebi.ac.uk/ols/ontologies/ms/terms?iri=http%3A%2F%2Fpurl.obolibrary.org%2Fobo%2FMS_4000092\u0027\u003eMS:4000092"}, {"font": {"color": "black"}, "id": 68, "label": "unidentified MS1 feature area principal component analysis result", "shape": "dot", "title": "\u003ca href=\u0027https://www.ebi.ac.uk/ols/ontologies/ms/terms?iri=http%3A%2F%2Fpurl.obolibrary.org%2Fobo%2FMS_4000093\u0027\u003eMS:4000093"}, {"font": {"color": "black"}, "id": 69, "label": "batch-corrected identified MS1 feature area principal component analysis result", "shape": "dot", "title": "\u003ca href=\u0027https://www.ebi.ac.uk/ols/ontologies/ms/terms?iri=http%3A%2F%2Fpurl.obolibrary.org%2Fobo%2FMS_4000094\u0027\u003eMS:4000094"}]);
edges = new vis.DataSet([{"from": 25, "to": 10}, {"from": 25, "to": 12}, {"from": 26, "to": 10}, {"from": 26, "to": 12}, {"from": 26, "to": 18}, {"from": 27, "to": 10}, {"from": 27, "to": 12}, {"from": 27, "to": 18}, {"from": 28, "to": 10}, {"from": 28, "to": 12}, {"from": 28, "to": 16}, {"from": 29, "to": 10}, {"from": 29, "to": 12}, {"from": 29, "to": 16}, {"from": 29, "to": 17}, {"from": 30, "to": 10}, {"from": 30, "to": 12}, {"from": 30, "to": 16}, {"from": 30, "to": 21}, {"from": 31, "to": 10}, {"from": 31, "to": 12}, {"from": 31, "to": 16}, {"from": 31, "to": 22}, {"from": 32, "to": 10}, {"from": 32, "to": 12}, {"from": 32, "to": 17}, {"from": 32, "to": 21}, {"from": 33, "to": 10}, {"from": 33, "to": 12}, {"from": 33, "to": 17}, {"from": 33, "to": 21}, {"from": 34, "to": 10}, {"from": 34, "to": 12}, {"from": 34, "to": 21}, {"from": 35, "to": 10}, {"from": 35, "to": 12}, {"from": 35, "to": 22}, {"from": 36, "to": 10}, {"from": 36, "to": 12}, {"from": 36, "to": 21}, {"from": 37, "to": 10}, {"from": 37, "to": 12}, {"from": 37, "to": 22}, {"from": 38, "to": 10}, {"from": 38, "to": 12}, {"from": 38, "to": 20}, {"from": 38, "to": 22}, {"from": 39, "to": 10}, {"from": 39, "to": 12}, {"from": 39, "to": 20}, {"from": 39, "to": 22}, {"from": 40, "to": 10}, {"from": 40, "to": 12}, {"from": 40, "to": 21}, {"from": 41, "to": 10}, {"from": 41, "to": 12}, {"from": 41, "to": 22}, {"from": 42, "to": 10}, {"from": 42, "to": 12}, {"from": 42, "to": 19}, {"from": 43, "to": 10}, {"from": 43, "to": 22}, {"from": 43, "to": 12}, {"from": 44, "to": 10}, {"from": 44, "to": 12}, {"from": 44, "to": 19}, {"from": 45, "to": 10}, {"from": 45, "to": 12}, {"from": 45, "to": 16}, {"from": 46, "to": 10}, {"from": 46, "to": 12}, {"from": 46, "to": 17}, {"from": 47, "to": 14}, {"from": 47, "to": 9}, {"from": 47, "to": 22}, {"from": 53, "to": 51}, {"from": 53, "to": 9}, {"from": 54, "to": 51}, {"from": 54, "to": 9}, {"from": 65, "to": 9}, {"from": 65, "to": 21}, {"from": 65, "to": 13}, {"from": 66, "to": 9}, {"from": 66, "to": 21}, {"from": 66, "to": 13}, {"from": 67, "to": 9}, {"from": 67, "to": 21}, {"from": 67, "to": 13}, {"from": 68, "to": 9}, {"from": 68, "to": 21}, {"from": 68, "to": 13}, {"from": 69, "to": 9}, {"from": 69, "to": 21}, {"from": 69, "to": 13}]);
// adding nodes and edges to the graph
data = {nodes: nodes, edges: edges};
var options = {
"configure": {
"enabled": false
},
"edges": {
"color": {
"inherit": true
},
"smooth": {
"enabled": true,
"type": "dynamic"
}
},
"interaction": {
"dragNodes": true,
"hideEdgesOnDrag": false,
"hideNodesOnDrag": false
},
"physics": {
"barnesHut": {
"avoidOverlap": 0,
"centralGravity": 0.3,
"damping": 0.09,
"gravitationalConstant": -80000,
"springConstant": 0.001,
"springLength": 250
},
"enabled": true,
"stabilization": {
"enabled": true,
"fit": true,
"iterations": 1000,
"onlyDynamicEdges": false,
"updateInterval": 50
}
}
};
network = new vis.Network(container, data, options);
// make a custom popup
var popup = document.createElement("div");
popup.className = 'popup';
popupTimeout = null;
popup.addEventListener('mouseover', function () {
console.log(popup)
if (popupTimeout !== null) {
clearTimeout(popupTimeout);
popupTimeout = null;
}
});
popup.addEventListener('mouseout', function () {
if (popupTimeout === null) {
hidePopup();
}
});
container.appendChild(popup);
// use the popup event to show
network.on("showPopup", function (params) {
showPopup(params);
});
// use the hide event to hide it
network.on("hidePopup", function (params) {
hidePopup();
});
// hiding the popup through css
function hidePopup() {
popupTimeout = setTimeout(function () { popup.style.display = 'none'; }, 500);
}
// showing the popup
function showPopup(nodeId) {
// get the data from the vis.DataSet
var nodeData = nodes.get(nodeId);
// get the position of the node
var posCanvas = network.getPositions([nodeId])[nodeId];
if (!nodeData) {
var edgeData = edges.get(nodeId);
var poses = network.getPositions([edgeData.from, edgeData.to]);
var middle_x = (poses[edgeData.to].x - poses[edgeData.from].x) * 0.5;
var middle_y = (poses[edgeData.to].y - poses[edgeData.from].y) * 0.5;
posCanvas = poses[edgeData.from];
posCanvas.x = posCanvas.x + middle_x;
posCanvas.y = posCanvas.y + middle_y;
popup.innerHTML = edgeData.title;
} else {
popup.innerHTML = nodeData.title;
// get the bounding box of the node
var boundingBox = network.getBoundingBox(nodeId);
posCanvas.x = posCanvas.x + 0.5 * (boundingBox.right - boundingBox.left);
posCanvas.y = posCanvas.y + 0.5 * (boundingBox.top - boundingBox.bottom);
};
// convert coordinates to the DOM space
var posDOM = network.canvasToDOM(posCanvas);
// Give it an offset
posDOM.x += 10;
posDOM.y -= 20;
// show and place the tooltip.
popup.style.display = 'block';
popup.style.top = posDOM.y + 'px';
popup.style.left = posDOM.x + 'px';
}
return network;
}
drawGraph();
</script>
</body>
</html>
@mwalzer
Copy link
Author

mwalzer commented Jun 1, 2022

A result from my q-n-d code-dump here. You need to zoom to see the labels.

@mwalzer
Copy link
Author

mwalzer commented Jun 1, 2022

Another visual for mzQC - logo redesign briefly discussed at the spring meeting.

mzqc_logo

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment