Jp/UI updates

src/components/plots/TransectMeshes.tsx

@@ -3,7 +3,7 @@ import * as THREE from 'three'
 import { usePlotStore } from '@/GlobalStates/PlotStore'
 import { useGlobalStore } from '@/GlobalStates/GlobalStore'
 import { useShallow } from 'zustand/shallow'
-import { deg2rad, parseUVCoords } from '@/utils/HelperFuncs'
+import { deg2rad } from '@/utils/HelperFuncs'
 import { useCoordBounds } from '@/hooks/useCoordBounds'
 import { useAxisIndices } from '@/hooks'
 
@@ -19,26 +19,33 @@ function remapToXYZ(uv: THREE.Vector2, latBounds: number[], lonBounds: number[])
 	);
 }
 
-function normalToPos(uv: THREE.Vector2, normal:THREE.Vector3, ratios:{depthRatio:number, aspectRatio:number}): THREE.Vector3{
+function normalToPos(uv: THREE.Vector2, normal:THREE.Vector3, ratios:{depthRatio:number, aspectRatio:number}, steps:{xSteps:number, ySteps:number, zSteps:number}): THREE.Vector3{
 	let posZ, posY, posX: number;
+	const {xSteps,ySteps,zSteps} = steps;
 	const {aspectRatio, depthRatio} = ratios;
 	if (Math.abs(normal.z) == 1){
 		const flip = normal.z < 0;
-		const x = flip ? (1-uv.x)-0.5: (uv.x-0.5)
+		let x = flip ? (1-uv.x)-0.5: (uv.x-0.5)
+		x = (Math.floor(x * xSteps)+0.5)/xSteps;
 		posX = x*2;
-		posY = (uv.y-0.5)*2*aspectRatio;
+		const y = (Math.floor(uv.y * ySteps) + 0.5)/ySteps;
+		posY = (y-0.5)*2*aspectRatio;
 		posZ = 0;
 	} else if (Math.abs(normal.y) == 1){
 		const flip = normal.y > 0;
-		const y = flip ? (1-uv.y)-0.5: (uv.y-0.5)
-		posX = (uv.x-0.5)*2;
+		let y = flip ? (1-uv.y)-0.5: (uv.y-0.5)
+		y = (Math.floor(y * zSteps)+0.5)/zSteps;
+		const x = (Math.floor(uv.x * xSteps)+0.5)/xSteps;
+		posX = (x-0.5)*2;
 		posY = 0;
 		posZ = y*Math.max(depthRatio,2);
 	} else {
 		const flip = normal.x > 0;
-		const x = flip ? (1-uv.x)-0.5: (uv.x-0.5)
+		let x = flip ? (1-uv.x)-0.5: (uv.x-0.5)
+		x = (Math.floor(x * zSteps)+0.5)/zSteps;
 		posX = 0;
-		posY = (uv.y-0.5)*2*aspectRatio;
+		const y = (Math.floor(uv.y * ySteps) + 0.5)/ySteps;
+		posY = (y-0.5)*2*aspectRatio;
 		posZ = x*Math.max(depthRatio,2);
 	}
 	return new THREE.Vector3(posX, posY, posZ)
@@ -56,11 +63,11 @@ function normalToScale(normal:THREE.Vector3, ratios:{depthRatio:number, aspectRa
 	} else if (Math.abs(normal.y) == 1){
 		scaleX = 2/xSteps;
 		scaleY = 2*aspectRatio;
-		scaleZ = 2*Math.max(depthRatio,2)/zSteps;
+		scaleZ = Math.max(depthRatio,2)/zSteps;
 	} else{
 		scaleX = 2;
 		scaleY = 2*aspectRatio/ySteps;
-		scaleZ = 2*Math.max(depthRatio,2)/zSteps;
+		scaleZ = Math.max(depthRatio,2)/zSteps;
 	}
 	return new THREE.Vector3(scaleX, scaleY, scaleZ);
 }
@@ -144,10 +151,9 @@ export const ColumnMeshes = () => {
 		const zSteps = dataShape[zIdx];
 		const aspectRatio = ySteps/xSteps; // This is not aspect ratio
 		const depthRatio = zSteps/xSteps;
-
 		for (const [_tsID, tsObj] of Object.entries(timeSeries)){
 			const {normal, uv, color} = tsObj
-			const position = normalToPos(uv, normal, {aspectRatio,depthRatio})
+			const position = normalToPos(uv, normal, {aspectRatio,depthRatio}, {xSteps, ySteps, zSteps})
 			const meshScale = normalToScale(normal, {aspectRatio, depthRatio}, {xSteps, ySteps, zSteps})
 			const thisColor = color.map((c: number) => Math.pow((c/255), 2.2)) // Gamma correct the color
 			const material = new THREE.MeshBasicMaterial({color: new THREE.Color(...thisColor)})

src/components/plots/UVCube.tsx

@@ -143,7 +143,6 @@ export const UVCube = ( {scale} : {scale?:THREE.Vector3} )=>{
         units:axisDimUnits[2-plotDim[0]] ?? ''
       }
     }
-    console.log(dimObj)
     updateDimCoords({[tsID] : dimObj})
   }
 

src/components/ui/Elements/ColorAdjuster.tsx

@@ -55,7 +55,7 @@ const ColorAdjuster = () => {
 					</PopoverTrigger>
 					<PopoverContent>
 						<p>Along with general arithmetic operations. The following globals can also be used:</p>
-						<ul className='grid grid-cols-2 !list-none bg-gray-100 rounded-lg border-solid border-2'>
+						<ul className='grid grid-cols-2 !list-none bg-[var(--background-modal)] rounded-lg border-solid border-2'>
 							{[
 								'abs(x)', 'sqrt(x)', 'min(x, y)', 'max(x, y)', 
 								'log(x)', 'log2(x)',  'exp(x)', 'exp2(x)', 

src/components/ui/Elements/Icons.tsx

@@ -66,5 +66,50 @@ const Potato = ({ color = "currentColor", size = 24, ...props }: IconProps) => (
   </svg>
 );
 
+const Robinson = ({
+  color = "currentColor",
+  size = 24,
+  strokeWidth = 1.5,
+  ...props
+}: IconProps) => (
+  <svg
+    fill="none"
+    stroke={color}
+    strokeWidth={strokeWidth}
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    height={size}
+    width={size}
+    viewBox="0 0 144.50848 90.925735"
+    version="1.1"
+    id="svg1"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <defs id="defs1" />
+    <g
+      id="layer1"
+      transform="translate(-33.273725,-104.80649)"
+    >
+      <rect
+        id="rect1"
+        width="140.28149"
+        height="86.698723"
+        x="35.387234"
+        y="106.92"
+        ry="43.349361"
+      />
+      <path d="m 136.74638,193.36596 c 0,0 22.74894,-10.69538 22.74894,-43.0966 0,-32.40122 -22.74894,-43.0966 -22.74894,-43.0966" id="path1" />
+      <path d="m 122.98796,193.36596 c 0,0 11.88,-12.97027 11.88,-42.84383 0,-29.87356 -11.88,-43.34937 -11.88,-43.34937" id="path2" />
+      <path d="m 105.90893,106.66723 v 87.20426" id="path5" />
+      <path d="M 34.628936,150.39574 H 175.9251" id="path6" />
+      <path d="M 41.959149,129.41617 H 169.35319" id="path7" />
+      <path d="M 41.959149,171.37532 H 169.35319" id="path8" />
+      <path d="m 75.237779,193.36596 c 0,0 -22.748942,-10.69538 -22.748942,-43.0966 0,-32.40122 22.748942,-43.0966 22.748942,-43.0966" id="path9" />
+      <path d="m 88.996198,193.36596 c 0,0 -11.879999,-12.97027 -11.879999,-42.84383 0,-29.87356 11.879999,-43.34937 11.879999,-43.34937" id="path10" />
+    </g>
+  </svg>
+);
+
 
-export { Perspective, Orthographic, Potato };
+export { Perspective, Orthographic, Potato, Robinson };