Merge pull request #554 from EarthyScience/jp/shader-uniforms

Shader Uniforms Config

Author: TheJeran

src/components/ui/ShaderEditor.tsx

@@ -8,12 +8,16 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/components/ui/select';
+import './css/ShaderEditor.css'
 import { Button } from './button';
 import { useAnalysisStore, useGlobalStore } from '@/GlobalStates';
 import { IoCloseCircleSharp } from "react-icons/io5";
 import { useShallow } from 'zustand/shallow';
 import {Hider, Input, Switcher} from '../ui';
 import { templates } from './ShaderTemplates';
+import { HiMiniWrench } from "react-icons/hi2";
+import { Popover, PopoverContent, PopoverTrigger } from '../ui';
+import { HandleKernelNums } from '@/utils/HelperFuncs';
 
 const selectedPlates = {
     None: " ",
@@ -22,6 +26,95 @@ const selectedPlates = {
     Convolution2D: "ConvolutionBoilerPlate2D"
 }
 
+const ConfigureUniforms = ({variables} : {variables:string[]})=>{
+    const {reduceOnAxis, axis, setKernelDepth, setKernelSize, setVariable2, setReduceOnAxis, setAxis} = useAnalysisStore(useShallow(state => ({
+        reduceOnAxis: state.reduceOnAxis,
+        axis: state.axis,
+        variable2: state.variable2,
+        setKernelDepth: state.setKernelDepth,
+        setKernelSize: state.setKernelSize,
+        setVariable2: state.setVariable2,
+        setReduceOnAxis: state.setReduceOnAxis,
+        setAxis: state.setAxis,
+    })))
+    const {dimNames, variable} = useGlobalStore(useShallow(state => ({dimNames: state.dimNames, variable:state.variable})))
+    const [thisKernelSize, setThisKernelSize] = useState(String(useAnalysisStore.getState().kernelSize))
+    const [thisKernelDepth, setThisKernelDepth] = useState(String(useAnalysisStore.getState().kernelDepth))
+
+    return(
+        <Popover>
+            <PopoverTrigger>
+                <div className='configure-uniforms'>
+                    <HiMiniWrench size={26}/>
+                </div>
+            </PopoverTrigger>
+            <PopoverContent>
+                <div className='grid grid-cols-2 gap-2'>
+                    <Switcher leftText='Remain' rightText='Reduce' state={!reduceOnAxis} onClick={()=>setReduceOnAxis(!reduceOnAxis)} className='col-span-2'/>
+                    <div className='col-span-2 flex items-center justify-center'>
+                        <p>Use <code>workgroup_size({reduceOnAxis ? "16, 16, 1" : "4, 4, 4"  })</code></p>
+                    </div>
+                    <b>Reduction Axis</b>
+                    <Select onValueChange={e=> setAxis(parseInt(e))}>
+                        <SelectTrigger>
+                            <SelectValue placeholder={dimNames[axis]} />
+                        </SelectTrigger>
+                        <SelectContent>
+                            {dimNames.map((val, idx) =>(
+                                <SelectItem key={idx} value={String(idx)}>
+                                    {val}
+                                </SelectItem>
+                            ))}
+                        </SelectContent>
+                    </Select>
+                    <div>
+                        kernelSize
+                        <Input type='number' value={thisKernelSize} 
+                            onChange={e=> setThisKernelSize(e.target.value)}
+                            onBlur={e=>{
+                                const newVal = HandleKernelNums(e.target.value)
+                                setThisKernelSize(String(newVal))
+                                setKernelSize(newVal)
+                            }}
+                        />
+                    </div>
+                    <div>
+                        kernelDepth
+                        <Input type='number' value={thisKernelDepth} 
+                            onChange={e=> setThisKernelDepth(e.target.value)}
+                            onBlur={e=>{
+                                const newVal = HandleKernelNums(e.target.value)
+                                setThisKernelDepth(String(newVal))
+                                setKernelDepth(newVal)
+                            }}
+                        />
+                    </div>
+                    <div className='col-span-2 flex flex-col items-center'>
+                        <b>Second Variable</b>
+                        <Select onValueChange={e=> setVariable2(e)}>
+                            <SelectTrigger>
+                                <SelectValue placeholder={"Select variable"} />
+                            </SelectTrigger>
+                            <SelectContent>
+                                <SelectItem key={"empty"} value={"Default"}>
+                                        No Variable
+                                </SelectItem>
+                                {variables.map((val, idx) =>(
+                                    val != variable && 
+                                    <SelectItem key={idx} value={val}>
+                                        {val}
+                                    </SelectItem>
+                                ))}
+                            </SelectContent>
+                        </Select>
+                    </div>
+                    
+                </div>
+            </PopoverContent>
+        </Popover>
+    )
+}
+
 export const ShaderEditor = ({visible} : {visible: boolean}) => {
     const [shader, setShader] = useState<string | undefined>()
     const [showUniforms, setShowUniforms] = useState(false)
@@ -39,10 +132,11 @@ export const ShaderEditor = ({visible} : {visible: boolean}) => {
         setKernelSize: state.setKernelSize,
         setReduceOnAxis: state.setReduceOnAxis
     })))
-    const {dimNames, dataShape, variable} = useGlobalStore(useShallow(state=>({
+    const {dimNames, dataShape, variable, variables,} = useGlobalStore(useShallow(state=>({
         dimNames: state.dimNames,
         dataShape: state.dataShape,
-        variable: state.variable
+        variable: state.variable,
+        variables: state.variables
     })))
     const [outputShape, setOutPutShape] = useState(dataShape)
 
@@ -53,12 +147,13 @@ export const ShaderEditor = ({visible} : {visible: boolean}) => {
 
     useEffect(()=>{
         if (reduceOnAxis){
-            const newShape = dataShape.filter((_val,idx) => idx != newDim)
+            const newShape = dataShape.filter((_val,idx) => idx != axis)
             setOutPutShape(newShape)
         } else{
             setOutPutShape(dataShape)
         }
-    },[reduceOnAxis, newDim, dataShape])
+    },[reduceOnAxis, axis, dataShape])
+
     return (
         <div
             className='fixed flex flex-col items-center w-[100%] h-[100%] z-10 left-1/2 -translate-x-1/2'
@@ -89,7 +184,7 @@ export const ShaderEditor = ({visible} : {visible: boolean}) => {
                     <b>kernelSize</b>
                     <p>This is the spatial radius of the kernel for convolution operations. It is currently set to <b>{kernelSize}</b></p>
                     <b>inputData</b>
-                    <p>This is the input array</p>
+                    <p>This is the input array when using one variable</p>
                     <b>dimLength</b>
                     <p>This is the length of the dimension being reduced. It is currently <b>{dataShape[axis]}</b></p>
                     <b>kernelDepth</b>
@@ -102,27 +197,40 @@ export const ShaderEditor = ({visible} : {visible: boolean}) => {
                     <p>When using two inputs, this is the second array. It is currently set to <b>{variable2}</b></p>
                 </div>
             </Hider>   
-            <div className='mt-8 mb-2 flex gap-4 items-center w-[60%]'> 
-                <div className='flex flex-col items-center self-end'> 
+            <div className='mt-8 mb-2 flex gap-4 items-center w-[60%] h-[50px]'> 
+                <div className='flex flex-col items-center self-end '> 
                     <b>Get started with presets</b>
                     <Select onValueChange={setBoilerPlate}>
-                    <SelectTrigger style={{ width: '175px', marginLeft: '18px' }}>
-                        <SelectValue placeholder={ "Select Template"} />
-                    </SelectTrigger>
-                    <SelectContent>
-                        {["None", "Reduction", "Convolution3D", "Convolution2D"].map((val,idx)=>(
-                            <SelectItem key={idx} value={selectedPlates[val as keyof typeof selectedPlates]}>
-                                {val}
-                            </SelectItem>
-                        ))}
-                    </SelectContent>
-                </Select>
+                        <SelectTrigger style={{ width: '175px', marginLeft: '18px' }}>
+                            <SelectValue placeholder={ "Select Template"} />
+                        </SelectTrigger>
+                        <SelectContent>
+                            {["None", "Reduction", "Convolution3D", "Convolution2D"].map((val,idx)=>(
+                                <SelectItem key={idx} value={selectedPlates[val as keyof typeof selectedPlates]}>
+                                    {val}
+                                </SelectItem>
+                            ))}
+                        </SelectContent>
+                    </Select>
                 </div>
                 <Button
                     onClick={()=>setShowUniforms(x=> !x)}
                 >
                     {(showUniforms ? 'Hide' : 'Show') + ' Uniforms'}
                 </Button>
+                <ConfigureUniforms variables={variables}/>
+                <div>
+                    Reduction:  
+                    <span style={{ color: reduceOnAxis ? "#44ef91" : "#ef4444" }}>
+                        {reduceOnAxis ? " True" : " False"}
+                    </span>
+                </div>
+                <div>
+                    Using Two Variables:  
+                    <span style={{ color: variable2 != "Default" ? "#44ef91" : "#ef4444" }}>
+                        {variable2 != "Default" ? "  True" : "  False"}
+                    </span>
+                </div>
             </div>
             <div className='w-[60%] h-[70%] relative'>
                 <IoCloseCircleSharp 

src/components/ui/ShaderTemplates.ts

@@ -133,11 +133,9 @@ fn main(@builtin(global_invocation_id) global_id: vec3<u32>) {
     }
     //Continue Here
 
-    let outputIndex = outY * xSize + outX;
-
     // Cast final value to f16 and write to output
     let calculatedValue = 0.0; 
-    outputData[outputIndex] = f16(calculatedValue); 
+    outputData[globalIdx] = f16(calculatedValue); 
 }
 `
 
@@ -196,11 +194,9 @@ fn main(@builtin(global_invocation_id) global_id: vec3<u32>,) {
     }
     //Continue Here
 
-    let outputIndex = outY * xSize + outX;
-
     // Cast final value to f16 and write to output
     let calculatedValue = 0.0; 
-    outputData[outputIndex] = f16(calculatedValue); 
+    outputData[globalIdx] = f16(calculatedValue); 
 }
 `
 

src/components/ui/Widgets/Switcher.tsx

@@ -1,10 +1,10 @@
 import React from 'react'
 
-export const Switcher = ({leftText, rightText, state, onClick} : {leftText: string, rightText: string, state: boolean, onClick: () => void}) => {
+export const Switcher = ({leftText, rightText, state, onClick, className} : {leftText: string, rightText: string, state: boolean, onClick: () => void, className?: string}) => {
 
   return (
     <div 
-        className='relative w-full text-center h-10 bg-primary rounded-full cursor-pointer mb-2 flex items-center justify-between px-4'
+        className={`${className} relative w-full text-center h-10 bg-primary rounded-full cursor-pointer mb-2 flex items-center justify-between px-4`}
         onClick={onClick}  
     >
         <span className={`z-10 font-semibold transition-colors ${state ? 'text-primary' : 'text-secondary'}`}>

src/components/ui/css/ShaderEditor.css

@@ -0,0 +1,26 @@
+.configure-uniforms {
+  background:var(--modal-shadow);              
+  border: 1px solid #d0d0d0;    
+  padding: 10px 20px;   
+  border-radius: 6px;               
+  cursor: pointer;
+  display: inline-block;
+  transition: 
+    background 0.2s ease,
+    box-shadow 0.2s ease,
+    transform 0.15s ease;
+
+  box-shadow: 0 1px 2px rgba(0,0,0,0.08);  
+}
+
+.configure-uniforms:hover {
+  background: #e6e6e6;              
+  box-shadow: 0 2px 4px rgba(0,0,0,0.12);
+  transform: translateY(-1px);      
+}
+
+.configure-uniforms:active {
+  background: #dcdcdc;
+  box-shadow: 0 1px 2px rgba(0,0,0,0.10);
+  transform: translateY(0);         
+}