Browse Source

Updates to review layouts

tomcat8 @ merlin 3 years ago
parent
commit
f8449eee22
3 changed files with 423 additions and 16 deletions
  1. 86 0
      views/reviewMP.html
  2. 88 0
      views/reviewNM.html
  3. 249 16
      web/crf/crfReview.js

+ 86 - 0
views/reviewMP.html

@@ -0,0 +1,86 @@
+<h3>Managing physician report</h3>
+
+<table>
+<tr>
+<th width="100" id="participantField">patientCode</th>
+<td id="participantCode">Loading1b</td>
+</tr>
+<tr>
+<th id="visitField">visitCode</th>
+<td id="visitCode">Loading2</td>
+</tr>
+</table>
+
+<div id="organ3">
+	<table>
+	<tr>
+		<td id="CT_organ3"></td>
+		<td id="PET_organ3"></td>
+		<td id="SUVall_organ3"></td>
+		<td id="SUVparticipant_organ3"></td>
+	</tr>
+	<tr>
+		<td id="CT_organ4"></td>
+		<td id="PET_organ4"></td>
+		<td id="SUVall_organ4"></td>
+		<td id="SUVparticipant_organ4"></td>
+	</tr>
+	<tr>
+		<td id="CT_organ5"></td>
+		<td id="PET_organ5"></td>
+		<td id="SUVall_organ5"></td>
+		<td id="SUVparticipant_organ5"></td>
+	</tr>
+	</table>
+</div>
+<div id="debugDiv">
+	<textarea id="debugCode"></textarea>
+</div>
+
+<script type="text/javascript">
+
+let searchParams = new URLSearchParams(window.location.search);
+
+//update this to pick crfRef from url
+let participantCode=searchParams.get('participantCode');
+let visitCode=searchParams.get('visitCode');
+document.getElementById("participantCode").innerHTML=participantCode;
+document.getElementById("visitCode").innerHTML=visitCode;
+let project=LABKEY.ActionURL.getContainer();
+document.getElementById("debugCode").value+='\n'+project;
+
+let server="https://merlin.fmf.uni-lj.si/labkey";
+let basePath=server+"/_webdav/";
+basePath+=project;
+basePath+="/@files/preprocessedImages/";
+basePath+=participantCode+"/"+visitCode+"/";
+document.getElementById("debugCode").value+='\n'+basePath;
+let studyPath=server+project;
+
+//let divImg=document.getElementById("organ3_PET");
+
+let organs=["3","4","5"];
+let im=["PET","CT"];
+for (let i=0;i<organs.length;i++){
+	let organ=organs[i];
+	let type="PET";
+
+	let img=document.createElement('img');
+	let imgSrc=basePath+participantCode+"-"+visitCode+"_"+type+"_"+organ+"_v5.png";
+	img.src=imgSrc;
+	img.width="300";
+	document.getElementById(type+"_organ"+organ).appendChild(img);
+							
+
+	type="CT";
+	let img1=document.createElement('img');
+	let img1Src=basePath+participantCode+"-"+visitCode+"_"+type+"_"+organ+"_v5.png";
+	img1.src=img1Src;
+	img1.width="300";
+	document.getElementById(type+"_organ"+organ).appendChild(img1);
+}
+LABKEY.requiresScript('/vis/genericChart/genericChartHelper.js', 
+      function(){LABKEY.vis.GenericChartHelper.loadVisDependencies(plotTime);});
+
+
+</script>

+ 88 - 0
views/reviewNM.html

@@ -0,0 +1,88 @@
+<h3>Title</h3>
+
+<table>
+<tr>
+<th id="participantField">patientCode</th>
+<td id="participantCode">Loading1b</td>
+</tr>
+<tr>
+<th id="visitField">visitCode</th>
+<td id="visitCode">Loading2</td>
+</tr>
+</table>
+
+<div id="organ3">
+	<table>
+	<tr>
+		<td id="CT_organ3"></td>
+		<td id="PET_organ3"></td>
+		<td id="SUVall_organ3"></td>
+		<td id="SUVparticipant_organ3"></td>
+	</tr>
+	<tr>
+		<td id="CT_organ4"></td>
+		<td id="PET_organ4"></td>
+		<td id="SUVall_organ4"></td>
+		<td id="SUVparticipant_organ4"></td>
+	</tr>
+	<tr>
+		<td id="CT_organ5"></td>
+		<td id="PET_organ5"></td>
+		<td id="SUVall_organ5"></td>
+		<td id="SUVparticipant_organ5"></td>
+	</tr>
+	</table>
+</div>
+<div id="debugDiv">
+	<textarea id="debugCode"></textarea>
+</div>
+
+<script type="text/javascript">
+
+let searchParams = new URLSearchParams(window.location.search);
+
+//update this to pick crfRef from url
+let participantCode=searchParams.get('participantCode');
+let visitCode=searchParams.get('visitCode');
+document.getElementById("participantCode").innerHTML=participantCode;
+document.getElementById("visitCode").innerHTML=visitCode;
+let project=LABKEY.ActionURL.getContainer();
+document.getElementById("debugCode").value+='\n'+project;
+
+let server="https://merlin.fmf.uni-lj.si/labkey";
+let basePath=server+"/_webdav/";
+basePath+=project;
+basePath+="/@files/preprocessedImages/";
+basePath+=participantCode+"/"+visitCode+"/";
+document.getElementById("debugCode").value+='\n'+basePath;
+let studyPath=server+project;
+
+//let divImg=document.getElementById("organ3_PET");
+
+let organs=["3","4","5"];
+let im=["PET","CT"];
+for (let i=0;i<organs.length;i++){
+	let organ=organs[i];
+	let type="PET";
+
+	let img=document.createElement('img');
+	let imgSrc=basePath+participantCode+"-"+visitCode+"_"+type+"_"+organ+"_v5.png";
+	img.src=imgSrc;
+	img.width="300";
+	document.getElementById(type+"_organ"+organ).appendChild(img);
+							
+
+	type="CT";
+	let img1=document.createElement('img');
+	let img1Src=basePath+participantCode+"-"+visitCode+"_"+type+"_"+organ+"_v5.png";
+	img1.src=img1Src;
+	img1.width="300";
+	document.getElementById(type+"_organ"+organ).appendChild(img1);
+}
+LABKEY.requiresScript('/vis/genericChart/genericChartHelper.js', 
+      function(){LABKEY.vis.GenericChartHelper.loadVisDependencies(plotAll);});
+LABKEY.requiresScript('/vis/genericChart/genericChartHelper.js', 
+      function(){LABKEY.vis.GenericChartHelper.loadVisDependencies(plotParticipant);});
+
+
+</script>

+ 249 - 16
web/crf/crfReview.js

@@ -48,14 +48,65 @@ function validateChartConfig(chartConfig, aes, scales, measureStore) {
 	return {"success": true, "messages": messages};
 
 }
+
 function selectRowsCallback(renderConfig, measureStore) {
 	let responseMetaData = measureStore.getResponseMetadata();
+	for (let f in measureStore)
+		document.getElementById('debugCode').value+='\n '+f+' '+typeof(f);
+	let record=measureStore.records()[1];
+	for (let f in record)
+		document.getElementById('debugCode').value+='\n '+f+ ' ' +typeof(f);
+
+	//try something stupid
+	let participantField=document.getElementById('participantField').innerHTML;
+	let participantCode=document.getElementById('participantCode').innerHTML;
+	let visitField=document.getElementById('visitField').innerHTML;
+	let visitCode=document.getElementById('visitCode').innerHTML;
+	let selectedParticipantData=new Array();
+	let otherParticipantData=new Array();
+	let i=0;
+	let maxValue=-1e30;
+	while (i<measureStore.records().length){
+		let record=measureStore.records()[i];
+		//document.getElementById('debugCode').value+='\n '+record[participantField].value;
+		let pMatch=record[participantField].value==participantCode;
+		let vMatch=true;
+		if (visitField in record)
+			vMatch=record[visitField].value==visitCode;
+		let sMatch=true;
+		if ('SequenceNum' in record)
+			sMatch=record['SequenceNum'].value<renderConfig.visitThreshold;
+
+		if (pMatch && vMatch) {
+			if (sMatch)
+				selectedParticipantData.push(record);
+			measureStore.records().splice(i,1);	
+			if (!sMatch)
+				continue;
+			if (record['value'].value>maxValue)
+				maxValue=record['value'].value;
+			continue;
+		}
+		record[participantField].value=renderConfig.labelOthers;
+		otherParticipantData.push(record);
+		measureStore.records().splice(i,1);	
+
+	}
+	document.getElementById('debugCode').value+='\nrecords: '+otherParticipantData.length;
+	document.getElementById('debugCode').value+='\nownData: '+selectedParticipantData.length;
+	document.getElementById('debugCode').value+='\nmaxValue: '+maxValue;
+	for (let i=0;i<otherParticipantData.length;i++)
+		measureStore.records().push(otherParticipantData[i]);
+	for (let i=0;i<selectedParticipantData.length;i++)
+		measureStore.records().push(selectedParticipantData[i]);
+	
 
         // chartConfig is the saved information about the chart (labels, scales, etc.)
 
 	let chartConfig = new Object();
 	chartConfig.renderType="line_plot";
 
+
 	let mX=new Object();
 	mX.displayFieldJsonType="";
         mX.hidden=false;
@@ -71,11 +122,20 @@ function selectRowsCallback(renderConfig, measureStore) {
         mX.shortCaption="Percentile";
         mX.dimension=false;
 
+	document.getElementById('debugCode').value+='\nplot: '+renderConfig.plot;
+	if (renderConfig.plot=="time"){
+		mX.fieldKey="SequenceNum";
+		mX.label="Visit ID";
+		mX.name="SequenceNum";
+		mX.alias="Visit";
+		mX.shortCaption="Visit ID";
+	}
+
 	let mY=new Object();
         mY.displayFieldJsonType="";
         mY.hidden=false;
         mY.fieldKey="value";
-        mY.label="Value";
+        mY.label="SUV Value";
         mY.schemaName="study";
         mY.type="float";
         mY.normalizedType="float";
@@ -90,15 +150,15 @@ function selectRowsCallback(renderConfig, measureStore) {
 	let mS=new Object();
         mS.displayFieldJsonType="";
         mS.hidden=false;
-        mS.fieldKey="ParticipantId";
+        mS.fieldKey=participantField;
         mS.label="Participant ID";
         mS.schemaName="study";
         mS.type="string";
         mS.normalizedType="string";
         mS.measure=false;
-        mS.name="ParticipantId";
+        mS.name=participantField;
         mS.queryName="SUVQuantiles";
-        mS.alias="ParticipantId";
+        mS.alias=participantField;
         mS.shortCaption="Participant ID";
         mS.dimension=true;
 
@@ -112,11 +172,15 @@ function selectRowsCallback(renderConfig, measureStore) {
         chartConfig.scales.x.trans="linear";
         chartConfig.scales.y=new Object();
         chartConfig.scales.y.trans="linear";
+	chartConfig.scales.y.min=0;
+	chartConfig.scales.y.max=renderConfig.max;
+	if (renderConfig.max<0)
+		chartConfig.scales.y.max=1.5*maxValue;
         chartConfig.labels=new Object();
-        chartConfig.labels.main="SUVQuantiles";
+        chartConfig.labels.main=renderConfig.title;
         chartConfig.labels.subtitle="";
         chartConfig.labels.x="Percentile";
-        chartConfig.labels.y="Value";
+        chartConfig.labels.y="SUV Value";
  	chartConfig.width=null;
         chartConfig.height=null;
         chartConfig.pointType="outliers";
@@ -126,14 +190,15 @@ function selectRowsCallback(renderConfig, measureStore) {
         chartConfig.geomOptions.width=null;
         chartConfig.geomOptions.height=null;
         chartConfig.geomOptions.pointType="outliers";
-        chartConfig.geomOptions.pointFillColor="3366FF";
+        chartConfig.geomOptions.pointFillColor="111111";
         chartConfig.geomOptions.lineWidth=2;
-        chartConfig.pointFillColor="3366FF";
+        chartConfig.pointFillColor="111111";
         chartConfig.lineWidth="3";
         chartConfig.lineColor="000000";
         chartConfig.boxFillColor="3366FF";
         chartConfig.hideDataPoints=false;
-        chartConfig.colorPaletteScale="ColorDiscrete";
+//        chartConfig.colorPaletteScale="ColorDiscrete";
+        chartConfig.geomOptions.colorPaletteScale="Light";
         chartConfig.chartLayout="single";
         chartConfig.chartSubjectSelection="subjects";
         chartConfig.displayIndividual=true;
@@ -153,7 +218,16 @@ function selectRowsCallback(renderConfig, measureStore) {
         chartConfig.showOutliers=true;
         chartConfig.binShape="hex";
 
+        chartConfig.labels.x="Percentile";
+
+
+	if (renderConfig.plot=="time"){
+        	chartConfig.labels.x="Visit ID";
+        	chartConfig.labels.y="SUV"+renderConfig.suv+"%";
+	}
+
 	if (!chartConfig.hasOwnProperty('width') || 
+
 		chartConfig.width == null) 
 		chartConfig.width = 1000;
         if (!chartConfig.hasOwnProperty('height') || 
@@ -185,6 +259,7 @@ function selectRowsCallback(renderConfig, measureStore) {
 		       responseMetaData.schemaName, responseMetaData.queryName);
         }
         let data = measureStore.records();
+	
         if (chartType == 'scatter_plot' && 
 		data.length > chartConfig.geomOptions.binThreshold) {
                chartConfig.geomOptions.binned = true;
@@ -239,7 +314,7 @@ function selectRowsCallback(renderConfig, measureStore) {
 	document.getElementById('debugCode').value+='\n plotConfig layers: '+plotConfig.layers.length;
 	for (let i=0;i<plotConfig.layers.length;i++){
 		let l=plotConfig.layers[i];
-		document.getElementById('debugCode').value+='\n color: '+l.aes.color;
+		document.getElementById('debugCode').value+='\n color: '+l.aes.pathColor;
 		if (l.data===null)
 			continue;
 		document.getElementById('debugCode').value+='\n data: '+l.data.length;
@@ -264,7 +339,157 @@ function selectRowsCallback(renderConfig, measureStore) {
 
 }
 
-function dependencyCallback() {
+function plotAll() {
+
+	let participantField=document.getElementById('participantField').innerHTML;
+	let visitField=document.getElementById('visitField').innerHTML;
+	document.getElementById('debugCode').value+='\n'+participantField;
+
+	let organs=["3","4","5"];
+		
+	for (let i=0;i < organs.length; i++){
+
+		let renderConfig=new Object();
+        	//all additional configuration stuff goes in here
+
+		renderConfig.chartId='SUVall_organ'+organs[i];
+		renderConfig.width=500;
+		renderConfig.participantCode=document.getElementById("participantCode").innerHTML;
+		renderConfig.visitCode=document.getElementById("visitCode").innerHTML;
+		renderConfig.labelOthers='other visits/participants';
+		renderConfig.plot="percentile";
+		renderConfig.max=10;
+		renderConfig.title="SUV cumulative distribution";
+
+		// When all the dependencies are loaded we then load the data via the MeasureStore selectRows API.
+		// The queryConfig object stores all the information needed to make a selectRows request
+		
+		let queryConfig = new Object;
+	        queryConfig.schemaName="study";
+        	queryConfig.queryName="SUVQuantiles";
+        	queryConfig.viewName=null;
+        	queryConfig.dataRegionName="Dataset";
+	        queryConfig.queryLabel="SUVQuantiles";
+        	queryConfig.parameters= new Object();
+		queryConfig.requiredVersion=13.2;
+	        queryConfig.maxRows=-1;
+        	queryConfig.sort="lsid";
+	        queryConfig.method="POST";
+        	queryConfig.columns=["percentile","value",participantField,visitField];
+	        queryConfig.filterArray=new Array();
+        	//queryConfig.filterArray.push({
+		//	"name":"patientCode",
+		//	"value":renderConfig.participantCode,
+		//	"type":"eq"});
+	        //queryConfig.filterArray.push({
+		//	"name":"visitCode",
+		//	"value":renderConfig.visitCode,
+		//	"type":"eq"});
+        	queryConfig.filterArray.push({
+			"name":"organ",
+			"value":organs[i],
+			"type":"eq"});
+
+		if (queryConfig.filterArray && 
+			queryConfig.filterArray.length > 0) {
+            		let filters = [];
+            		for (let i = 0; i < queryConfig.filterArray.length; i++) {
+                		let f = queryConfig.filterArray[i];
+                		filters.push(LABKEY.Filter.create(
+					f.name,  f.value, 
+					LABKEY.Filter.getFilterTypeForURLSuffix(f.type)));
+            		}
+            		queryConfig.filterArray = filters;
+        	}
+        	queryConfig.success = function(data){
+			selectRowsCallback(renderConfig,data);};
+        	queryConfig.containerPath = "/iPNUMMretro/Study";
+        	LABKEY.Query.MeasureStore.selectRows(queryConfig);
+	}
+};
+
+function plotParticipant() {
+
+	let participantField=document.getElementById('participantField').innerHTML;
+	let participantCode=document.getElementById('participantCode').innerHTML;
+	let visitField=document.getElementById('visitField').innerHTML;
+	document.getElementById('debugCode').value+='\n'+participantField;
+
+	let organs=["3","4","5"];
+		
+	for (let i=0;i < organs.length; i++){
+
+		let renderConfig=new Object();
+        	//all additional configuration stuff goes in here
+
+		renderConfig.chartId='SUVparticipant_organ'+organs[i];
+		renderConfig.width=500;
+		renderConfig.participantCode=document.getElementById("participantCode").innerHTML;
+		renderConfig.visitCode=document.getElementById("visitCode").innerHTML;
+		renderConfig.labelOthers='other visits';
+		renderConfig.plot="percentile";
+		renderConfig.max=10;
+		renderConfig.title="SUV cumulative distribution";
+		
+
+		// When all the dependencies are loaded we then load the data via the MeasureStore selectRows API.
+		// The queryConfig object stores all the information needed to make a selectRows request
+		
+		let queryConfig = new Object;
+	        queryConfig.schemaName="study";
+        	queryConfig.queryName="SUVQuantiles";
+        	queryConfig.viewName=null;
+        	queryConfig.dataRegionName="Dataset";
+	        queryConfig.queryLabel="SUVQuantiles";
+        	queryConfig.parameters= new Object();
+		queryConfig.requiredVersion=13.2;
+	        queryConfig.maxRows=-1;
+        	queryConfig.sort="lsid";
+	        queryConfig.method="POST";
+        	queryConfig.columns=["percentile","value",participantField,visitField];
+	        queryConfig.filterArray=new Array();
+        	queryConfig.filterArray.push({
+			"name":"patientCode",
+			"value":renderConfig.participantCode,
+			"type":"eq"});
+	        //queryConfig.filterArray.push({
+		//	"name":"visitCode",
+		//	"value":renderConfig.visitCode,
+		//	"type":"eq"});
+        	queryConfig.filterArray.push({
+			"name":"organ",
+			"value":organs[i],
+			"type":"eq"});
+
+		if (queryConfig.filterArray && 
+			queryConfig.filterArray.length > 0) {
+            		let filters = [];
+            		for (let i = 0; i < queryConfig.filterArray.length; i++) {
+                		let f = queryConfig.filterArray[i];
+                		filters.push(LABKEY.Filter.create(
+					f.name,  f.value, 
+					LABKEY.Filter.getFilterTypeForURLSuffix(f.type)));
+            		}
+            		queryConfig.filterArray = filters;
+        	}
+        	queryConfig.success = function(data){
+			selectRowsCallback(renderConfig,data);};
+		queryConfig.containerPath=LABKEY.ActionURL.getContainer();
+        	LABKEY.Query.MeasureStore.selectRows(queryConfig);
+	}
+};
+
+function plotTime() {
+
+	let participantField=document.getElementById('participantField').innerHTML;
+	let participantCode=document.getElementById('participantCode').innerHTML;
+	let visitField=document.getElementById('visitField').innerHTML;
+	let visitCode=document.getElementById('visitCode').innerHTML;
+
+	let visitValue=parseInt(visitCode.split('_')[1])+1;
+	document.getElementById('debugCode').value+='\n'+visitValue;
+
+
 
 	let organs=["3","4","5"];
 		
@@ -273,10 +498,18 @@ function dependencyCallback() {
 		let renderConfig=new Object();
         	//all additional configuration stuff goes in here
 
-		renderConfig.chartId='SUV_organ'+organs[i];
+		renderConfig.chartId='SUVparticipant_organ'+organs[i];
 		renderConfig.width=500;
 		renderConfig.participantCode=document.getElementById("participantCode").innerHTML;
 		renderConfig.visitCode=document.getElementById("visitCode").innerHTML;
+		renderConfig.labelOthers='others';
+		renderConfig.suv=95;
+		renderConfig.plot="time";
+		if (organs[i]=="4")
+			renderConfig.suv=70;
+		renderConfig.max=-1;
+		renderConfig.visitThreshold=visitValue;
+		renderConfig.title="Quantitative inflamation time-curve";
 
 		// When all the dependencies are loaded we then load the data via the MeasureStore selectRows API.
 		// The queryConfig object stores all the information needed to make a selectRows request
@@ -292,15 +525,15 @@ function dependencyCallback() {
 	        queryConfig.maxRows=-1;
         	queryConfig.sort="lsid";
 	        queryConfig.method="POST";
-        	queryConfig.columns=["percentile","value","ParticipantId"];
+        	queryConfig.columns=["SequenceNum","value",participantField];
 	        queryConfig.filterArray=new Array();
         	//queryConfig.filterArray.push({
 		//	"name":"patientCode",
 		//	"value":renderConfig.participantCode,
 		//	"type":"eq"});
 	        queryConfig.filterArray.push({
-			"name":"visitCode",
-			"value":renderConfig.visitCode,
+			"name":"percentile",
+			"value":renderConfig.suv,
 			"type":"eq"});
         	queryConfig.filterArray.push({
 			"name":"organ",
@@ -320,7 +553,7 @@ function dependencyCallback() {
         	}
         	queryConfig.success = function(data){
 			selectRowsCallback(renderConfig,data);};
-        	queryConfig.containerPath = "/IPNUMMprospektiva/Study";
+        	queryConfig.containerPath = "/iPNUMMretro/Study";
         	LABKEY.Query.MeasureStore.selectRows(queryConfig);
 	}
 };