jscomut updates

pearcetm · Jan 11, 2018 · c1b2952 · c1b2952
1 parent 041f445
commit c1b2952
Show file tree

Hide file tree

Showing 16 changed files with 7,556 additions and 4 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/index.html b/index.html
@@ -11,10 +11,10 @@
     <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.1.1/d3.min.js"></script>
 
     <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
-    <link rel="stylesheet" href="comut.css">
+    <link rel="stylesheet" href="jscomut.css">
 
-    <script src="utils.js"></script>
-    <script src="comut.js"></script>
+    <script src="jscomututils.js"></script>
+    <script src="jscomut.js"></script>
 
 </head>
 <body>
@@ -84,5 +84,5 @@
 PBA9	T2N0M0	61	F	Micropapillary	Unstable	POS
         </div>
     </div>
-  <script src="index.js"></script>
+  <script src="jscomutdemo.js"></script>
 </body>
diff --git a/index.html~ b/index.html~
@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<head>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Comutation plot</title>
+
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.1.1/d3.min.js"></script>
+
+    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="comut.css">
+
+    <script src="utils.js"></script>
+    <script src="comut.js"></script>
+
+</head>
+<body>
+  <div style="width:100%;max-width:950px;margin:0 auto;">
+    <div id="widget"></div>
+    <div id="test-buttons"></div>
+  </div>
+    <div id="example-data" style="display:none;">
+        <div id="example-mutations">
+            Sample	Gene	Alteration	Type
+PBA1	TP53	A189fs	fs
+PBA2	TP53	R273H	missense
+PBA2	IDH2	R172S	missense
+PBA3	CTNNB1	D32N	missense
+PBA3	RB1	HETLOSS	del
+PBA4	SMARCB1	HETLOSS	del
+PBA5	CTNNB1	S45F	missense
+PBA5	TP53	K132N	missense
+PBA5	KRAS	G12A	missense
+PBA5	APC	R876*	stop
+PBA5	TP53	HETLOSS	del
+PBA6			
+PBA7	TP53	F134C	missense
+PBA8	TP53	F134C	missense
+PBA9	KRAS	G12D	missense
+PBA9	GNAS	GAIN	amp
+PBA11			
+PBA12	TP53	G245C	missense
+PBA12	PIK3CA	N1044K	missense
+PBA12	SMO	Q216*	stop
+
+        </div>
+        <div id="example-annotations">
+            Sample	Stage	Age	Sex	HGUC subtype	MSI	GATA3
+PBA1	T2N0M0	65	M	Micropapillary	Stable	POS
+PBA11	T4aN2M1	76	M	Squamous	Stable	POS
+PBA12	T2N0M0	58	M	Sarcomatoid	Stable	POS
+PBA2	T1N0M0	68	F	Neuroendocrine	Stable	POS
+PBA21	T3bN1M1	38	M	NOS	Stable	POS
+PBA211	T3aN2M0	75	F	Nested	Stable	NEG
+PBA212	T3aN1M0	71	F	CIS	Stable	NEG
+PBA22	T1N0M0	80	M	Squamous	Stable	POS
+PBA23	T1N0M0	63	M	NOS	Stable	POS
+PBA24	T3bN2M0	72	M	Micropapillary	Stable	POS
+PBA25	T2bN0M0	44	M	Micropapillary	Stable	POS
+PBA26	T3bN2M0	36	F	Squamous	Stable	POS
+PBA27	T4aN2M0	46	M	Squamous	Unstable	POS
+PBA28	T2bN1M0	39	F	Nested	Stable	POS
+PBA29	T2bN0M0	72	M	Sarcomatoid	Stable	POS
+PBA3	T2bN1M0	60	F	Neuroendocrine	Stable	POS
+PBA31	T1N0M0	39	M	Neuroendocrine	Stable	POS
+PBA311	T2bN1M0	43	M	Squamous	Stable	POS
+PBA312	T2N0M0	53	M	Squamous	Unstable	NEG
+PBA32	T3bN2M1	74	M	NOS	Stable	POS
+PBA33	T3bN2M0	61	F	NOS	Stable	POS
+PBA34	T4aN0M0	38	M	NOS	Stable	POS
+PBA35	T1N0M0	76	M	NOS	Stable	NEG
+PBA36	T1N0M0	55	F	NOS	Stable	POS
+PBA37	T1N0M0	50	M	Squamous	Stable	POS
+PBA38	T2bN1M0	59	M	Adenocarcinoma	Stable	POS
+PBA39	T4aN2M1	79	F	NOS	Stable	POS
+PBA4	T2N0M0	73	F	Sarcomatoid	Stable	POS
+PBA5	T1N0M0	68	M	NOS	Stable	NEG
+PBA6	T3bN2M0	78	M	Squamous	Stable	NEG
+PBA7	T4aN0M0	74	M	NOS	Stable	POS
+PBA8	T2N1M0	55	M	NOS	Stable	POS
+PBA9	T2N0M0	61	F	Micropapillary	Unstable	POS
+        </div>
+    </div>
+  <script src="index.js"></script>
+</body>
diff --git a/jscomut.css b/jscomut.css
@@ -0,0 +1,147 @@
+/********* Options panel styling **********/
+.comut-panel{
+	display:block;
+	padding:2px;
+	margin:2px;
+	border:thin lightgray solid;
+}
+.optionsheader .panel-header{
+	display:inline-block;
+	margin-right:5px;	
+}
+.comut-panel.collapsed{
+	display:none;
+}
+.panel-header{
+	cursor:pointer;
+	color:purple;
+}
+.panel-header:before{
+	content:'[-]';
+	padding-right:2px;
+}
+.panel-header[collapsed=true]:before{
+	content:'[+]';
+	padding-right:2px;
+}
+
+/******End of options panel styling *******/
+.load-data, .save-data{
+	border-left: medium darkgray solid;
+	margin:12px 4px;
+	padding: 5px;
+}
+.load-data:before{
+	content:'Load';
+}
+.save-data:before{
+	content:'Save';
+}
+.load-data:before, .save-data:before{
+	font-size:1.2em;
+	font-weight:bold;
+	display:block;
+}
+#mutation-file-info:empty:before{
+	content:'Genomic data: not loaded';
+}
+#demographic-file-info:empty:before{
+	content:'Demographic data: not loaded';
+}
+#gene-fields:empty:before{
+	content:'Genomic data has not been loaded';
+}
+#demographics-fields:empty:before{
+	content:'Demographic data has not been loaded';
+}
+/**************/
+input[type=number]{
+	width:4em;
+	margin-right:2px;
+}
+label.alteration-type{
+	width:100px;
+}
+input{
+	margin-right:10px;
+}
+/********* Comut widget styling **********/
+svg[interaction=dnd] .draggable-xy{
+    cursor:all-scroll;
+}
+svg[interaction=zp] .draggable-xy{
+    cursor:-webkit-zoom-grab;
+}
+#comut-svg{
+    overflow:visible;
+}
+.comut-download-overlay{
+	position: fixed;
+	left: 0;
+	right: 0;
+	top: 0;
+	bottom: 0;
+}
+.comut-download-background{
+	width:100%;
+	height:100%;
+	background-color: black;
+	opacity: 0.6
+}
+.comut-download-box{
+   background-color:white;
+   position: fixed;
+   left: 50%;
+   top: 50%;
+   transform: translate(-50%, -50%);
+   padding: 1em;
+   text-align:center;
+}
+.comut-download-box:before{
+	content:'Use the link below to save (download) your file.  Hint: Right-click and "save as" to change the file name or location.';
+	max-width:25em;
+	display:block;
+	margin-bottom:5px;
+}
+/********** End of comut widget styling ****/
+
+
+
+/*****d3-tip related styling******/
+.d3-tip {
+  line-height: 1;
+  font-weight: bold;
+  padding: 12px;
+  background: rgba(0, 0, 0, 0.8);
+  color: #fff;
+  border-radius: 2px;
+}
+
+/* Creates a small triangle extender for the tooltip */
+.d3-tip:after {
+  box-sizing: border-box;
+  display: inline;
+  font-size: 10px;
+  width: 100%;
+  line-height: 1;
+  color: rgba(0, 0, 0, 0.8);
+  content: "\25BC";
+  position: absolute;
+  text-align: center;
+}
+/* Style northward tooltips differently */
+.d3-tip.n:after {
+  margin: -1px 0 0 0;
+  top: 100%;
+  left: 0;
+}
+.tooltip-key{
+    color:lightgrey;
+}
+.tooltip-key::after{
+    content:': ';
+}
+.d3-tip span{
+    margin:0.1em auto;
+}
+/********** End of d3-tip related styling *********/