Update index.html

index.html

@@ -41,6 +41,8 @@
 		img {
 			float: right;
 			z-index: 0;
+			max-width: 200%;
+			clip-path: polygon(50% 1%, 100% 1%, 100% 99%, 50% 99%);
 		}
 	</style>
 	<script src="https://cdn.jsdelivr.net/npm/[email protected]/fuzzysort.min.js"></script>
@@ -103,16 +105,16 @@
 <div style="display: grid; grid-template-columns: 1fr 1fr;">
 	<div id="container" style="width: 700px; height: 700px;"></div>
 	<div id="gui_container" style="z-index: 200;"></div>
-	<div style="z-index: 90;">
+	<div style="z-index: 90; overflow: clip">
 		<div id="parallel" style="width: 50%; height: 100%; float: right; position: absolute; overflow: clip">
 		</div>
 	</div>
 	<svg id="axes" xmlns="http://www.w3.org/2000/svg"
-		 width=40% height="100%"
-		 style="left:calc(50% + 2em);position:fixed; float: right; z-index: 100;">
+		 width="50%" height="100%"
+		 style="position:fixed; float: right; z-index: 100;">
 	</svg>
 </div>
-<canvas id="canvas" style="position: fixed; left: 0; top: 0; z-index:10" ></canvas>
+<canvas id="canvas" style="position: fixed; left: 0; top: 0;" ></canvas>
 <div id="tooltip"></div>
 
 <script src="d3.min.js"></script>
@@ -335,7 +337,7 @@
 	var opacityCache = [];
 	var resetBool = true;
 	var renderBool = true;
-	var renderCount = 0;
+	var renderBoolUpdate = false;
 
 	// actual calls
 	init();
@@ -365,7 +367,7 @@
 
 		// interaction
 		raycaster = new THREE.Raycaster();
-		raycaster.params.Points.threshold = 0.7;
+		raycaster.params.Points.threshold = 12;
 		raycasterMultiTokens = new THREE.Raycaster();
 		raycasterMultiTokens.params.Points.threshold = 1.75;
 		raycasterAnnotations = new THREE.Raycaster();
@@ -375,11 +377,11 @@
 		document.addEventListener('mousemove', onDocumentMouseMove, false);
 
 		scene = new THREE.Scene();
-		camera = new THREE.PerspectiveCamera(45,
-				window.innerWidth/window.innerHeight, 5, 4000);
+		camera = new THREE.PerspectiveCamera(90,
+				window.innerWidth/window.innerHeight, 5, 8000);
 
 		camera.position.set(400, 200, 800); // camera.position.z = 800;
-		camera.near = 5; // CHANGED NEAR PARAM TO MAKE RAY CASTING SMOOTHER DURING ZOOM
+		camera.near = camera.far; // CHANGED NEAR PARAM TO MAKE RAY CASTING SMOOTHER DURING ZOOM
 		camera.lookAt(400, 200, 0);
 
 		// REQUIRED - For camera control
@@ -914,13 +916,12 @@
 
 		// now render the parallel coordinates canvas
 		if (renderBool === true) {
-			renderCount++;
 			renderParallelCoords(renderer, selectionWidgetInfo);
-			if (renderCount === 60) {
+			if (renderBoolUpdate) {
+				renderBoolUpdate = false;
 				renderBool = false;
-				const imgData = renderer.domElement.toDataURL("image/png").replace("image/png", "image/octet-stream");
-				console.log(imgData);
-				var elem = document.createElement("img");
+				const imgData = renderer.domElement.toDataURL("image/png").replace("image/png", "image/parallel_plot");
+				const elem = document.createElement("img");
 				elem.src = imgData;
 				window.location.href=imgData;
 				document.getElementById("parallel").appendChild(elem);
@@ -1895,7 +1896,7 @@
 			.setUsage( THREE.StaticDrawUsage));
 		makeStringAttributes(particleData) // TODO: encapsulate particle cloud initialization, too
 
-		console.log("strings in used in line segments", strings);
+		//console.log("strings in used in line segments", strings);
 		skein = new THREE.LineSegments( strings, lMaterial )
 		skein.frustumCulled = false;
 		selectionWidgetInfo.scene.add( skein ); // same renderer, different scene and camera
@@ -1921,8 +1922,9 @@
 						})
 						const res = makeStringAttributes(particleData)
 						if (res.cleanFlag) {
-							console.log('parallel coordinates initialized')
-							console.log(skein)
+							//console.log('parallel coordinates initialized')
+							//console.log(skein)
+							renderBoolUpdate = true;
 						}
 					}
 					reader.readAsText(colorMapData);
@@ -1962,7 +1964,7 @@
 			keys.slice(-1)[0]
 		];
 
-		console.log("keystrip", keysStrip);
+		//console.log("keystrip", keysStrip);
 
 		// populate the buffers directly
 		const n = keysStrip.length
@@ -1990,11 +1992,11 @@
 				})
 			})
 		if (cleanFlag) {
-			console.log(data.length)
-			console.log(stringPositions.findIndex((pos,i) => i%3 == 2 && pos === 0))
+			//console.log(data.length)
+			//console.log(stringPositions.findIndex((pos,i) => i%3 == 2 && pos === 0))
 
 			strings.computeBoundingBox() // throws an error if some vertices are undefined
-			console.log(strings)
+			//console.log(strings)
 
 			// strings.center()
 
@@ -2372,11 +2374,13 @@
 				})
 				.call((g) =>
 						g.append("text") // axis labels
-						.attr("x", 30)
-						.attr("y", 0)
+						.style("font-size", "15")
+						.attr("x", 20)
+						.attr("y", -5)
 						.attr("text-anchor", "start")
 						.attr("fill", "currentColor")
 						.text((d) => d)
+
 				)
 				.call((g) =>
 						g.selectAll("text")
@@ -2398,7 +2402,7 @@
 					else {
 						selections.set(key, selection.map(x(key).invert));
 						updatePtsColor();
-						console.log("Selections: ", selections)
+						//console.log("Selections: ", selections)
 						for (let [key, value] of  selections.entries()) {
 							planktonFilters[key] = value;
 							submitRange(key)