Merge pull request #50 from EarthyScience/Fixes

Fixes

Author: TheJeran

src/components/CanvasGeometry.tsx

@@ -184,7 +184,7 @@ export function CanvasGeometry() {
     {metadata && <Metadata data={metadata} /> }
 
     <plotContext.Provider value={plotObj} >
-      <PlotArea />
+      {variable !== "Default" && <PlotArea />}
     </plotContext.Provider>
 
     {/* <Leva theme={lightTheme} /> */}

src/components/PlotObjects/PlotArea/PlotArea.css

@@ -1,9 +1,13 @@
 .plot-coords{
-    position: relative;
-    width: 200px;
+    position: absolute;
+    max-width:150px;
     bottom:50%;
     left:2%;
-    pointer-events: none;
+    padding: 5px 5px;
+    background-color: rgba(0, 0, 0, 0.445);
+    box-shadow: 0px 0px 4px white;
+    cursor: move;
+    user-select: none;
 }
 
 .point-info{

src/components/PlotObjects/PlotArea/PlotArea.tsx

@@ -1,7 +1,7 @@
 import { Canvas } from '@react-three/fiber'
 import { parseLoc } from '@/utils/HelperFuncs'
 import { PlotLine, FixedTicks } from '@/components/PlotObjects'
-import { useContext, useEffect, useState } from 'react'
+import { useContext, useEffect, useRef, useState } from 'react'
 import { plotContext } from '@/components/Contexts'
 import { ResizeBar, YScaler,XScaler } from '@/components/UI'
 import './PlotArea.css'
@@ -46,8 +46,71 @@ function PointInfo({pointID,pointLoc,showPointInfo}:pointInfo){
   )
 }
 
+function PointCoords(){
+  const {coords} = useContext(plotContext);
+  const [moving,setMoving] = useState<boolean>(false)
+  const initialMouse = useRef<number[]>([40,115])
+  const initialDiv = useRef<number[]>([40,115])
+  const [xy, setXY] = useState<number[]>([40,115])
+
+  function handleDown(e: any){
+    initialMouse.current = [e.clientX,e.clientY]
+    initialDiv.current = [...xy]
+    setMoving(true)
+  }
+
+  function handleMove(e: any){
+    if (moving){
+      const deltaX = initialMouse.current[0]-e.clientX
+      const deltaY = initialMouse.current[1]-e.clientY
+      const x = Math.max(initialDiv.current[0]-deltaX,10)
+      const y = Math.max(initialDiv.current[1]+deltaY,14) //Again hardcoded footer height
+      setXY([Math.min(x,window.innerWidth-100),Math.min(y,window.innerHeight-100)])
+    }
+  }
+
+  function handleUp(){
+    setMoving(false)
+  }
+
+  useEffect(() => {
+    if (moving) {
+      document.addEventListener('mousemove', handleMove);
+      document.addEventListener('mouseup', handleUp);
+    }
+    return () => {
+      document.removeEventListener('mousemove', handleMove);
+      document.removeEventListener('mouseup', handleUp);
+    };
+  }, [moving]);
+
+  return(
+    <>
+    { //Only show coords when coords exist
+      coords && coords.first.name !== 'Default' && 
+      <div className='plot-coords'
+        style={{
+          left:`${xy[0]}px`,
+          bottom:`${xy[1]}px`
+        }}
+        onPointerDown={handleDown}
+        onPointerMove={handleMove}
+        onPointerUp={()=>setMoving(false)}     
+      >
+        <b>{`${coords['first'].name}: `}</b>
+        {`${parseLoc(coords['first'].loc,coords['first'].units)}`}
+        <br/> <br/>
+        <b>{`${coords['second'].name}: `}</b>
+        {`${parseLoc(coords['second'].loc,coords['second'].units)}`}
+      </div>
+    } 
+    </>
+  )
+
+}
+
+
 export function PlotArea() {
-  const {coords} = useContext(plotContext)
   const [pointID, setPointID] = useState<number>(0);
   const [pointLoc, setPointLoc] = useState<number[]>([0,0])
   const [showPointInfo,setShowPointInfo] = useState<boolean>(false)
@@ -86,16 +149,7 @@ export function PlotArea() {
         <PlotLine height={height} pointSetters={pointSetters} yScale={yScale} xScale={xScale}/>
         <FixedTicks height={height} yScale={yScale} xScale={xScale}/>
       </Canvas>
-      { //Only show coords when coords exist
-        coords && coords.first.name !== 'Default' && 
-        <div className='plot-coords'>
-          <b>{`${coords['first'].name}: `}</b>
-          {`${parseLoc(coords['first'].loc,coords['first'].units)}`}
-          <br/> <br/>
-          <b>{`${coords['second'].name}: `}</b>
-          {`${parseLoc(coords['second'].loc,coords['second'].units)}`}
-        </div>
-      } 
+      <PointCoords/>
     </div>
   )
 }

src/components/PlotObjects/PointCloud.tsx

@@ -12,17 +12,25 @@ interface PCProps {
 
 export const PointCloud = ({textures} : {textures:PCProps} )=>{
     const {texture, colormap } = textures;
-    const {pointScale,scalePoints} = useControls({
+    const {pointScale,scalePoints,scaleIntensity} = useControls({
       pointScale:{
         value:1,
         min:1,
-        max:40,
+        max:100,
         step:1
       },
       scalePoints:{
         value:false,
         label:"Scale Points By Value"
+      },
+      scaleIntensity:{
+        value:2,
+        min:1,
+        max:10,
+        step:.2,
+        labe: "Scale Intensity"
       }
+
       }
     )
     //Extract data and shape from Data3DTexture
@@ -82,7 +90,8 @@ export const PointCloud = ({textures} : {textures:PCProps} )=>{
       uniforms: {
         pointSize: {value: pointScale},
         cmap: {value: colormap},
-        scalePoints:{value: scalePoints}
+        scalePoints:{value: scalePoints},
+        scaleIntensity: {value: scaleIntensity}
       },
       vertexShader:pointVert,
       fragmentShader:pointFrag,

src/components/Textures/shaders/fragColumns.glsl

@@ -0,0 +1,94 @@
+// by Jeran Poehls
+precision highp float;
+precision highp sampler3D;
+
+uniform mat4 modelViewMatrix;
+uniform mat4 projectionMatrix;
+
+in vec3 vOrigin;
+in vec3 vDirection;
+
+out vec4 color;
+
+uniform sampler3D map;
+uniform sampler2D cmap;
+
+uniform vec3 scale;
+uniform float threshold;
+uniform float steps;
+uniform bool flip;
+uniform vec4 flatBounds;
+uniform vec2 vertBounds;
+uniform float intensity;
+
+vec2 hitBox(vec3 orig, vec3 dir) {
+    vec3 box_min = vec3(-(scale * 0.5));
+    vec3 box_max = vec3(scale * 0.5);
+    vec3 inv_dir = 1.0 / dir;
+    vec3 tmin_tmp = (box_min - orig) * inv_dir;
+    vec3 tmax_tmp = (box_max - orig) * inv_dir;
+    vec3 tmin = min(tmin_tmp, tmax_tmp);
+    vec3 tmax = max(tmin_tmp, tmax_tmp);
+    float t0 = max(tmin.x, max(tmin.y, tmin.z));
+    float t1 = min(tmax.x, min(tmax.y, tmax.z));
+    return vec2(t0, t1);
+}
+
+float sample1( vec3 p ) {
+    return texture( map, p ).r;
+}
+
+#define epsilon 0.0001
+
+void main() {
+    vec3 rayDir = normalize(vDirection);
+    vec2 bounds = hitBox(vOrigin, rayDir);
+
+    if (bounds.x > bounds.y) discard;
+
+    bounds.x = max(bounds.x, 0.0);
+
+    vec3 p = vOrigin + bounds.x * rayDir;
+    vec3 inc = 1.0 / abs(rayDir);
+    float delta = min(inc.x, min(inc.y, inc.z));
+    delta /= steps;
+
+    vec4 accumColor = vec4(0.0);
+    float alphaAcc = 0.0;
+    for (float t = bounds.x; t < bounds.y; t += delta) {
+        if (p.x > -flatBounds.x || p.x < -flatBounds.y) {
+            p += rayDir * delta;
+            continue;
+        }
+        if (-p.z > -flatBounds.z || -p.z < -flatBounds.w) {
+            p += rayDir * delta;
+            continue;
+        }
+        if (p.y < vertBounds.x || p.y > vertBounds.y) {
+            p += rayDir * delta;
+            continue;
+        }
+
+        float d = sample1(p / scale + 0.5);
+
+        bool cond = (d > threshold) || (d == 0.0 && threshold == 0.0);
+        cond = flip ? !cond : cond;
+
+        if (cond) {
+            vec4 col = texture(cmap, vec2(d, 0.5));
+            // Change this later back to use intensity then delete comment. Or maybe we don't need intensity
+            float alpha = float(col.a > 0.);
+
+            accumColor.rgb += (1.0 - alphaAcc) * alpha * col.rgb;
+            alphaAcc += alpha * (1.0 - alphaAcc);
+
+            if (alphaAcc >= 1.0) break;
+        }
+
+        p += rayDir * delta;
+    }
+
+    accumColor.a = alphaAcc; // Set the final accumulated alpha
+    color = accumColor;
+    if (color.a == 0.0) discard;
+}

src/components/Textures/shaders/fragDebug.glsl

@@ -2,14 +2,17 @@ attribute float value;
 varying float vValue;
 uniform float pointSize;
 uniform bool scalePoints;
+uniform float scaleIntensity;
 
 void main() {
     vValue = value/255.;
     gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
     //If it is nan we just yeet it tf out of the screen space. LMAO I love this solution
-    if (value == 255.){
+    float pointScale = pointSize/gl_Position.w;
+    pointScale = scalePoints ? pointScale*pow(vValue,scaleIntensity) : pointScale;
+    if (value == 255. || pointScale < 0.75){
         gl_Position = vec4(2.0, 2.0, 2.0, 1.0);
     }
-    float pointScale = pointSize/gl_Position.w;
-    gl_PointSize = scalePoints ? pointScale*pow(vValue,2.) : pointScale ;
+
+    gl_PointSize = pointScale;
 }

src/components/Textures/shaders/pointVertex.glsl

@@ -10,7 +10,7 @@ const XScaler = ({scale,setScale}:{scale:number,setScale:React.Dispatch<React.Se
     const handleMouseDown = (e: React.MouseEvent<HTMLDivElement>) => {
         e.preventDefault(); // Prevent text selection
         setIsResizing(true);
-        initialPosition.current = e.clientY // Record starting height
+        initialPosition.current = e.clientX // Record starting height
     };
 
     // Adjust height on mousemove

src/components/UI/XScaler.tsx

@@ -134,15 +134,6 @@ export class ZarrDataset{
 		const pz = slice[0] == null ? 0 : stride[0]*slice[0]
 		const py = slice[1] == null ? 0 : stride[1]*slice[1]
 		const px = slice[2] == null ? 0 : stride[2]*slice[2]
-
-		// console.log(`
-		// 	Slice:${slice}
-		// 	mapDim:${mapDim}
-		// 	dimStride:${dimStride}
-		// 	pz:${pz}
-		// 	py:${py}
-		// 	px:${px}
-		// 	`)
 		const ts = [];
 
 		for (let i = 0; i < shape[mapDim] ; i++){