Moved all volume and point-cloud plots to new "Plot" component and canvas. Moved data loader to Plot component. Renamed PlotArea to PlotLine. Added interactive modification of this area with tweakpane. Fixed plotline vertical scale issue.

Author: TheJeran

src/app/globals.css

@@ -94,4 +94,17 @@ li {
   top: 2.5rem !important ;
   right: 0.5rem !important;
   z-index: 100 !important;
+}
+
+.plot-pane{
+  position: fixed;
+  top: 2.5rem !important ;
+  right: 0.5rem !important;
+  z-index: 100 !important;
+}
+
+.line-plot-pane{
+  position: absolute;
+  bottom:300px;
+  left: 50px;
 }

src/components/CanvasGeometry.tsx

@@ -1,18 +1,18 @@
 'use client';
-
 import * as THREE from 'three'
 THREE.Cache.enabled = true;
 import { Canvas } from '@react-three/fiber';
 import { Center, OrbitControls, Environment } from '@react-three/drei'
 import { ZarrDataset, variables } from '@/components/zarr/ZarrLoaderLRU'
 import { useEffect, useState, useMemo, useRef } from 'react';
 import { PointCloud, UVCube, PlotArea, DataCube } from '@/components/plots';
-import { GetColorMapTexture, ArrayToTexture, DefaultCube, colormaps } from '@/components/textures';
+import { GetColorMapTexture, ArrayToTexture, DefaultCubeTexture, colormaps } from '@/components/textures';
 import { Metadata } from '@/components/ui';
 import { plotContext, DimCoords } from '@/components/contexts';
 // import ComputeModule from '@/components/computation/ComputeModule'
-import { usePaneInput, usePaneFolder, useTweakpane } from '@lazarusa/react-tweakpane'
+import { usePaneInput, usePaneFolder, useTweakpane, useButtonBlade } from '@lazarusa/react-tweakpane'
 import { createPaneContainer } from '@/components/ui/paneContainer';
+import Plot from './plots/Plot';
 
 interface Array{
   data:number[],
@@ -49,20 +49,16 @@ export function CanvasGeometry() {
     value: colormap
   })), []);
 
-  const paneContainer = createPaneContainer();
-
   const pane = useTweakpane(
     {
-      backgroundcolor: "#2d4967",
+      backgroundcolor: "#2c3d4f",
       vName: "Default",
       plottype: "volume",
       cmap: "Spectral",
       flipCmap: false,
     },
     {
       title: 'Settings',
-      container: paneContainer ?? undefined,
-      expanded: true,
     }
   );
 
@@ -71,7 +67,7 @@ export function CanvasGeometry() {
     value: '#2d4967'
   })
   const [variable] = usePaneInput(pane, 'vName', {
-    label: 'Name',
+    label: 'Plot Variable',
     options: [
       {
         text: 'Default',
@@ -82,7 +78,7 @@ export function CanvasGeometry() {
     value: 'Default'
   })
 
-  const [plotter] = usePaneInput(pane, 'plottype', {
+  const [plotType] = usePaneInput(pane, 'plottype', {
     label: 'Plot type',
     options: [
       {
@@ -118,7 +114,7 @@ export function CanvasGeometry() {
     value: false
   })
 
-  const [texture, setTexture] = useState<THREE.DataTexture | THREE.Data3DTexture | null>(null) //Main Texture
+
   const [shape, setShape] = useState<THREE.Vector3 | THREE.Vector3>(new THREE.Vector3(2, 2, 2))
   const [valueScales,setValueScales] = useState({maxVal:1,minVal:-1})
   const [colormap,setColormap] = useState<THREE.DataTexture>(GetColorMapTexture())
@@ -128,7 +124,7 @@ export function CanvasGeometry() {
   const [dataArray, setDataArray] = useState<Array | null>(null)
 
   //Timeseries Plotting Information
-  const [dimArrays,setDimArrays] = useState([[0],[0],[0]])
+  const [dimArrays,setDimArrays] = useState<number[][]>([[0],[0],[0]])
   const [dimNames,setDimNames] = useState<string[]>(["default"])
   const [dimUnits,setDimUnits] = useState<string[]>(["Default"]);
   const [dimCoords, setDimCoords] = useState<DimCoords>();
@@ -141,68 +137,40 @@ export function CanvasGeometry() {
   const [executeReduction,setExecuteReduction] = useState<boolean>(false)
   const [showAnalysis, setShowAnalysis] = useState<boolean>(false)
 
+  //Camera states
+  // const [resetCamera, setResetCamera] = useState<boolean>(false)
+
+  // useButtonBlade(pane, {
+  //   title: "Reset Camera",
+  //   label: "Reset Camera"
+  // } , ()=>setResetCamera(true))
+
   useEffect(()=>{
     setColormap(GetColorMapTexture(colormap,cmap,1,"#000000",0,flipCmap));
   },[cmap, colormap,flipCmap])
 
-  //DATA LOADING
-  useEffect(() => {
-    if (variable != "Default") {
-      setShowLoading(true);
-      //Need to add a check somewhere here to swap to 2D or 3D based on shape. Probably export two variables from GetArray
-      ZarrDS.GetArray(variable).then((result) => {
-        // result now contains: { data: TypedArray, shape: number[], dtype: string }
-        const [texture, shape, scaling] = ArrayToTexture({
-          data: result.data,
-          shape: result.shape
-        })
-        setDataArray(result)
-        console.log(`logging the shape since we will want to use it in the future for 2D vs 3D actions ${shape}`)
-        if (texture instanceof THREE.DataTexture || texture instanceof THREE.Data3DTexture) {
-          setTexture(texture)
-        } else {
-          console.error("Invalid texture type returned from ArrayToTexture");
-          setTexture(null);
-        }
-        if (
-          typeof scaling === 'object' &&
-          'maxVal' in scaling &&
-          'minVal' in scaling
-        ) {
-          setValueScales(scaling as { maxVal: number; minVal: number });
-        }
-        const shapeRatio = result.shape[1] / result.shape[2] * 2;
-        setShape(new THREE.Vector3(2, shapeRatio, 2));
-        setShowLoading(false)
-      })
-      //Get Metadata
-      ZarrDS.GetAttributes(variable).then((result)=>{
-        setMetadata(result);
-        const [dimArrs, dimMetas] = ZarrDS.GetDimArrays()
-        setDimArrays(dimArrs)
-        const dimNames = []
-        const tempDimUnits = []
-        for (const meta of dimMetas){
-          dimNames.push(meta.standard_name)
-          tempDimUnits.push(meta.units)
-        }
-        setDimNames(dimNames)
-        setDimUnits(tempDimUnits)
-      })
-
+  //These values are passed to the Plot Component
+  const plotObj = {
+    values:{
+      plotType,
+      colormap,
+      ZarrDS,
+      variable,
+      shape,
+      bgcolor
+    },
+    setters:{
+      setShowLoading,
+      setDataArray,
+      setValueScales,
+      setShape,
+      setMetadata,
+      setDimArrays,
+      setDimNames,
+      setDimUnits,
     }
-      else{
-        const texture = DefaultCube();
-        // again need to check type before using it
-        if (texture instanceof THREE.Data3DTexture || texture instanceof THREE.DataTexture) {
-          setTexture(texture);
-        }
-        setShape(new THREE.Vector3(2, 2, 2))
-        setMetadata(null)
-      }
-  }, [variable])
+  }
 
-  //These are passed to the UVCube (will be renamed) to extract the timeseries info
   const timeSeriesObj ={
     setters:{
       setTimeSeries,
@@ -225,7 +193,7 @@ export function CanvasGeometry() {
   };
 
 //This is the data being passed down the plot tree
-  const plotObj = {
+  const lineObj = {
     coords: dimCoords ?? defaultDimCoords,
     plotDim,
     dimNames,
@@ -251,39 +219,14 @@ export function CanvasGeometry() {
   return (
     <>
     <Loading showLoading={showLoading} />
-    <div className='canvas'>
-      <Canvas shadows camera={{ position: [-4.5, 3, 4.5], fov: 50 }}
-      frameloop="demand"
-      >
-        
-        <Center top position={[-1, 0, 1]}/>
-        {/* {dataArray && showAnalysis && <ComputeModule array={dataArray} cmap={colormap} shape={shape.toArray()} stateVars={analysisVars}/>} */}
-        {/* Volume Plots */}
-        
-        {plotter == "volume" && <>
-          <DataCube volTexture={texture} shape={shape} colormap={colormap}/>
-          <UVCube {...timeSeriesObj} />
-        </>}
-
-        {/* Point Clouds Plots */}
-        {plotter == "point-cloud" && <PointCloud textures={{texture,colormap}} />}
-        
-        {/* Time Series Plots */}
-        <OrbitControls minPolarAngle={0} maxPolarAngle={Math.PI / 2} enablePan={false}
-        maxDistance={50}
-        
-        />
-        <Environment preset="city" />
-        
-      </Canvas>
-    </div>
+    <Plot values={plotObj.values} setters={plotObj.setters} timeSeriesObj={timeSeriesObj} /> 
     {/* {showAnalysis && <AnalysisWindow setters={analysisSetters}/>} */}
     {metadata && <Metadata data={metadata} /> }
 
-    <plotContext.Provider value={plotObj} >
+    <plotContext.Provider value={lineObj} >
       {timeSeries.length > 2 && <PlotArea />}
     </plotContext.Provider>
-   
+
     <button
       style={{
         position:'fixed',

src/components/contexts/AppContext.ts

@@ -0,0 +1,3 @@
+import { createContext } from "react";
+import * as THREE from 'three'
+

src/components/plots/DataCube.tsx

@@ -3,6 +3,7 @@ import {  useRef } from 'react'
 import * as THREE from 'three'
 import { vertexShader, fragmentShader } from '@/components/textures/shaders';
 import { usePaneInput, usePaneFolder, useSliderBlade, useTweakpane } from '@lazarusa/react-tweakpane'
+import { createPaneContainer } from '../ui';
 
 
 interface DataCubeProps {
@@ -13,13 +14,15 @@ interface DataCubeProps {
 
 export const DataCube = ({ volTexture, shape, colormap }: DataCubeProps ) => {
     const meshRef = useRef<THREE.Mesh>(null);
-     const pane = useTweakpane(
+    const paneContainer = createPaneContainer("plot-pane");
+
+    const pane = useTweakpane(
         {
           flip: false,
         },
         {
           title: 'Volume',
-          // container: container,
+          container: paneContainer ?? undefined,
           expanded: true,
         }
       );

src/components/plots/FixedTicks.tsx

@@ -53,12 +53,12 @@ export function FixedTicks({
         const timeStrings = []
         for (let i = 0 ; i < xDimArray.length; i++){
           const timeStamp = Number(xDimArray[i])*unit
-          // timeStrings.push(new Date(timeStamp).toDateString())
-          const date = new Date(timeStamp);
-          // const dateString = date.toDateString().replace(/\s(\d{4})$/, '\n$1');
-          const dateString = `${date.getDate().toString().padStart(2, '0')}/${(date.getMonth() + 1).toString().padStart(2, '0')}\n${date.getFullYear()}`;
+          timeStrings.push(new Date(timeStamp).toDateString())
+          // const date = new Date(timeStamp);
+          // // const dateString = date.toDateString().replace(/\s(\d{4})$/, '\n$1');
+          // const dateString = `${date.getDate().toString().padStart(2, '0')}/${(date.getMonth() + 1).toString().padStart(2, '0')}\n${date.getFullYear()}`;
+          // // timeStrings.push(dateString);
           // timeStrings.push(dateString);
-          timeStrings.push(dateString);
         }
         return timeStrings
       }
@@ -68,7 +68,7 @@ export function FixedTicks({
 
   const initialBounds = useMemo<ViewportBounds>(()=>{
   const worldWidth = window.innerWidth
-  const worldHeight = (window.innerHeight-height-50)
+  const worldHeight = (window.innerHeight-height)
 
   const newBounds = {
       left: -worldWidth / 2 + camera.position.x,
@@ -256,6 +256,7 @@ export function FixedTicks({
                     >
                       {(yRange[0]+(normY*yDimSize)).toFixed(1)}
 
+
                     </Text>
                   )}
                 </group>